Dollar sign in HTML attribute name

Question

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!

Answer 1

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.