[0.9] hostAttributes: Noooooooo!

[gertcuykens]

Please just stick with using properties for everything

  properties: {
    checked: {
      type: bool,
      default: true,
      //indicate private or public here if you must
    }
  }

Properties are properties don't confuse everybody with the following

hostAttributes: {
  checked: true
}

[ebidel]

Attributes and properties are subtle in native elements. The important bit is that attributes do not always map to properties (Aria attrs) and vice versa (HTMLSelectElement.selectedIndex does not have an attribute). hostAttributes allows you to specify default attributes on element instances without defining a property, accessible in JS.

A good example for needing hostAttributes is aria:

hostAttributes: {
  role: 'link'
}

When created: <my-link role="link">. Users could instead use setAttribute('role', 'link') if they don't want to use hostAttributes, but the latter is a bit of sugaring.

If you want a property that also reflects to an attribute, use reflectToAttribute: true.

[gertcuykens]

Ok thanks for the explanation, I can see now why it must be.

[zerodevx]

Thanks ebidel for the concise explanation - should definitely be added to the docs.

I was confused too when clearly I could define exposed attributes (ie the public api) via the polymer element properties object, but your explanation somewhat clears up the difference between user-created properties and default HTML attributes.

[marcus7777]

so do I do both

...
hostAttributes: {
  role: 'link'
},
...

&

...
  properties: {
    role: {
      type: string,
      default: "link",
      reflectToAttribute: true
    }
  },
...

?

[ebidel]

Should be just the first. Elements dont have a role property. The aria stuff is just attributes.