Web Components & Shadow DOM

How can you style elements in the Shadow DOM from outside the component?

my-element {
  --primary-color: blue;
  --padding: 20px;
}

/* Inside Shadow DOM */
:host {
  padding: var(--padding);
  color: var(--primary-color);
}

Using global CSS selectors
Through direct style manipulation
Using CSS custom properties (variables)
CSS custom properties (variables) are the primary mechanism for styling Shadow DOM elements from outside because: 1) They can pierce through the Shadow DOM boundary, 2) Allow for theming and customization of components, 3) Provide a clean API for styling encapsulated components, 4) Maintain encapsulation while allowing for external style influence. Regular CSS selectors cannot cross the Shadow DOM boundary.
It's not possible to style Shadow DOM from outside

Next Question (7/20)