Component - attribute binding
Attribute binding is a method of passing a variable into a component via an attribute in the host element so it can be used inside the component.
When an attribute in the host element changes, it updates automatically in the component.
This method would be useful if you have multiple instances of the same component, and need the inner contents of each component to be somehow different.
Attribute binding is a technique that only works on custom tags natively, so Active CSS has that same limitation. To set up data-binding on a host attribute, you need to manually "observe" the attribute for changes. This is native behaviour, as it was considered impractical by the browser people to observe all attributes on all elements automatically, for performance reasons. So in Active CSS you have to manually specify which attributes you want to observe, just like you would in native JavaScript. And you have to invent a new element tag and give it a name, like "<my-new-tag></my-new-tag>". By doing this, you are allowed to use attribute binding. In short, you can't use attribute binding on a div tag, you need to make up your own custom tag.
In the example here, when the button below is clicked, some variables change that are bound in the host element attributes. Because these attributes then change, this data is passed into the component itself where any data-bound host attribute references also change.
The variable references that set the styling for these squares are placed inline in div tags. Having the square color styling outside in the global CSS is not what we want - the CSS color is specific to each individual div tag. Because there is no shadow DOM being used which would give us isolated CSS, we have to place the styling inline in the div tag.
The only other real coding difference between this sort of component and a shadow DOM component is that you use the word "private" as a parameter in the @component line, as opposed to "shadow" which would set the component to use a shadow DOM.