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.
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.