Polymer代码中HTML属性名内$符号的含义咨询

Hey there! Let me break down that $ syntax you encountered in your Polymer code—it's a purpose-built feature for handling boolean attribute binding, and it's super useful once you get the hang of it.

What does the $ do? #

In Polymer, when you write an attribute like wide-layout$="{{wide}}", the $ tells the framework that this is a boolean attribute binding. Here's how it works:

• When the bound variable (wide in your example) evaluates to true (or any truthy value), the wide-layout attribute will be added to the element (you'll see <div class="item" wide-layout> in the DOM).
• When the variable is false (or falsy, like null/undefined), the wide-layout attribute will be removed entirely from the element.

Why this matters for boolean attributes #

HTML boolean attributes work differently than regular attributes—their presence alone is enough to trigger their behavior (think <input disabled> or <button checked>). A regular attribute binding like wide-layout="{{wide}}" would set the attribute value to the string "true" or "false", which isn't what you want for boolean attributes. The $ syntax fixes this by directly controlling whether the attribute exists at all, aligning perfectly with how HTML treats these attributes.

Your example in action #

Let's tie this to your code:

• When wide is true, the element has the wide-layout attribute, so your CSS selector .item[wide-layout] .title will target the .title child and apply its styles.
• When wide is false, the attribute is gone, so that CSS selector won't match anything, and the styles won't be applied.

This is a clean way to toggle styles or component behavior based on a boolean state without having to manually add/remove attributes in your JavaScript.

内容的提问来源于stack exchange，提问作者jldupont