Search code examples
htmlpolymer

Dollar sign in HTML attribute name

I was looking at some Polymer code (link) and stumbled upon something new to me: a dollar sign $ in an html attribute name e.g.

<div class="item" wide-layout$="{{wide}}">

Also, a CSS selector is used:

.item[wide-layout] .title { ... }

How is the $ sign interpreted in the element attribute ?

Thanks for your time folks!

Solution

  • Using $ on the element binds a property to an attribute. You can read more here.

    wide in your scenario is probably a Boolean property on the element.

    When wide = true, a wide-layout DOM attribute will be added to the element so it can be targeted via CSS.