Shadow DOM - attribute binding
Attribute binding is a technique that only works on custom elements natively, so Active CSS has that same limitation. This may change, but for now it mimics browser behaviour.
It is a method of passing a variable into a shadow DOM scope via the attribute in the host element so it can be used inside the shadow DOM component.
You set the attribute in the host element. If you want to use data-binding on the attribute, you need to "observe" it for changes. This follows native terminology. So when the attribute changes, you want it to change wherever it is referenced in the shadow DOM itself as a variable.
When the attribute on the host element is changed, it automatically updates the variables that have been data-binded inside the shadow DOM beneath it.
This next example is modified from an native JavaScript MDN example on attribute binding. It is simpler in Active CSS than doing it natively.
This example also contains a custom command (update-squares-one) to change the host elements' attributes when the button is clicked, so you can see how the data-binding works.
When the button is clicked, all the host elements' attributes are changed, and this is passed into the shadow DOM where any data-bound attributes also change. The attribute variables are placed in a style tag, so the squares re-draw automatically with the new values.