What are difference between hostAttributes and properties in polymer?

Question

I'm doing migration from 0.5 to 1.0.

While reading, I notice 2 different way on declaring attributes, using hostAttributes and properties.

What are difference between those 2 ?

Volpe

Answer 1

Host attributes are attributes that do not match to an element's corresponding Javascript property (which you declare in properties). This includes attributes like class, tabindex, data-* attributes, aria-roles, etc. To declare them during create-time, you must set them in the hostAttributes object. If you are going to bind values into them, you must use $= (which calls Element.setAttribute) rather than =.

Sources:

• https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#host-attributes
• https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

Roselleroselyn

Not class. The class attribute can't be configured using hostAttributes. – Domino

Answer 2

If a custom element needs HTML attributes set on it at create-time, the attributes may be declared in a hostAttributes property on the prototype, where keys are the attribute names and values are the values to be assigned.

But now since listeners and hostAttributes have been removed from element metadata

we can use _ensureAttribute as an alternative to define these kind of attributes

ex:-

this._ensureAttribute('tabindex', 0); you can declare all such properties in ready

Tushy