Shadow DOM - private variables
This is an example of the nature of private variables in shadow DOM components.
It creates 3 components that are the identical in structure and function, but each component has a separate variable scope, so variables have different values in each component when they are randomly generated on 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.
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.