Component - private variables
This is an example of the nature of private Active CSS variables.
It creates 3 components that are the identical in structure and function, but each component has a private variable scope, so variables have different values in each component when they are generated for each component.
Private components must always be hosted by a host element. This element is at the top of every variable scope and is called the component host. If you forget to use a host element, and just render a private component anywhere, such as after a specific element, you may get unpredictable results, as the host element will be automatically assigned to the immediate parent element of the component. If you have multiple private components that share the same host element (which would be a mistake as the same host cannot have multiple scopes), the scoping is going to get confused, and things are going to get weird. So be sure to define your parent element specifically so you know where your scoping host is!
Active CSS variable scoping is not the same as CSS scoping for shadow DOMs. When you set the "private" parameter on any type of component, shadow DOM or non-shadow DOM, it means that everything under that component will be scoped to the same area unless there is a lower privately scoped component in the element tree.
This means that you can have nested shadow DOMs, or nested non-shadow DOM components, and they can all share the same variable scope. Or all the Active CSS variables could all share the global DOM scope - it's up to you.
The difference between the shadow DOM method and this example here is that the shadow DOM method has isolated CSS, and the general private method has global CSS. If you want "per component" CSS, ie. a shadow DOM component, you need to use inline CSS in the style attribute within a component tag. This is the only way you can set styles that are different for each instance of a component. So if you needed totally isolated CSS within your component - completely separate from the main page CSS - you would use the shadow DOM method, presuming of course that the browsers that you need to support for your website do actually support shadow DOM technology.
In this example, a function is run inside each component which generates a set of random variables for that component, hence determining the shape of a polygon.
The shapes are different, because each component has a set of variables with their own values. Even though the variable names are the same in all the components, the separate scoping means there is in reality three sets of variables, one set for each component.