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 ?

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