Style tags repeated excessively on shadow DOM

[ghost]

This issue is blocked by systematic design issues with component styling. Each component has its own styles and imports global set of styles and css variables via scss import. With all components using Angular simulated shadow DOM these styles are attached as a sibling style element. When these components are used within an actual shadow DOM encapsulated component, they include the sibling style element for each component used as an inner component.

The solution would be to isolate css variables used per component and have global css variables that can override and provide shared styling. This would minimize each component styles encapsulated to what it requires and would not have many duplicate large style elements.