How does styling the Shadow DOM work?

Shadow DOM encapsulates HTML and CSS. Styles outside do not bleed in, and styles inside do not bleed out, except via specific CSS variables or parts.

To style a web component's shadow DOM from the outside, you use custom CSS properties (which pierce the shadow boundary) or the ::part() pseudo-element (if the component author explicitly exported parts).