Boolean property value is based on presence of attribute?

[qiuy...@google.com]

Hi,

I am having a question about Boolean property value. As the doc says Boolean properties are set based on the presence of the attribute: if the attribute exists at all, the property is set to true, regardless of the attribute value. If the attribute is absent, the property gets its default value.

Here is my experiment. my-element want to use a collapseOpened property to bind to it's local DOM iron-collapse's property 'opened'. 

<iron-collapse opened="{{collapseOpened}}">

      some texts

</iron-collapse>

<script>

Polymer({

  is: 'my-element',

  properties: {

    collapseOpened: {

      type: Boolean,

      value: false,

    }

  },

});

</script>

Since in the 'opened' attribute is present in iron-collapse, should it be true? But in fact, the iron-collapse is not expanded, which indicates the value is false.

Any ideas?

[Daniel Llewellyn]

I believe there are two different things going-on here. You are correct that HTML specifies that if an attribute is present then it is always a truthy value when queried by javascript even if explicitly set to false in the markup. The problem is that your attribute is assigned a value via Polymer's data-binding. If this were a normal attribute on a regular HTML specified tag such as <div hidden=""> then class would always be truthy.

However as this is a custom-element-specific attribute handled via Polymer's data-binding then the rules are a bit less well-defined. Polymer is explicitly setting the javascript property named for the attribute to the value of "false" via data-binding even-though the attribute is present in the markup.

HTH,

Dan.