Style zakresowe wewnątrz shadow DOM

Każda reguła <style> wewnątrz shadow root ma zastosowanie tylko w obrębie tego root. p { color: red } w drzewie shadow DOM nadaje czerwony kolor tylko akapitom znajdującym się w tym shadow DOM — akapity w głównym dokumencie pozostają bez zmian, a style głównego dokumentu nie docierają do wnętrza shadow DOM.

Hermetyzacja eliminuje problem globalnego CSS, który od dziesięcioleci nęka duże aplikacje. Style komponentu nie mogą zostać przypadkowo nadpisane przez CSS witryny, a komponent nie może przypadkowo popsuć witryny. Ta granica wynika ze specyfikacji, a nie z umowy przyjętej przez programistów.

Wewnątrz shadow DOM element hosta należy stylować za pomocą :host. Do ograniczenia stylowania na podstawie selektora należy użyć :host(selector): :host([open]) { display: block; } dopasowuje hosta tylko wtedy, gdy obecny jest atrybut open.

Dziedziczone właściwości CSS (color, font-family, line-height) nadal przekraczają granicę shadow DOM przez dziedziczenie. Ustawienie body { color: blue } w dokumencie sprawi, że tekst w shadow DOM również będzie niebieski, chyba że shadow DOM jawnie go nadpisze. Jest to przydatne, ponieważ domyślne ustawienia typografii pozostają spójne.

Niestandardowe właściwości CSS (zmienne CSS) są dziedziczone przez shadow root, dzięki czemu stanowią standardowy sposób udostępniania API motywów komponentu: należy zadeklarować --card-bg: var(--surface, white) wewnątrz shadow DOM i pozwolić użytkownikom nadpisać --surface na hoście.

Element wewnętrzny shadow DOM można oznaczyć za pomocą part="name", aby użytkownicy mogli go stylować przez my-card::part(name) { ... }. Parts służą jako punkty stylowania pojedynczych elementów, przy zachowaniu hermetyzacji większości drzewa shadow DOM.

shadowRoot.adoptedStyleSheets = [sheet] pozwala współdzielić jeden CSSStyleSheet między wieloma shadow rootami, unikając wielokrotnego parsowania elementów <style>. Arkusze należy tworzyć za pomocą new CSSStyleSheet(), a następnie wywołać sheet.replaceSync(cssText). W systemach projektowych zapewnia to dużą poprawę wydajności.

Elementy <style> należy umieszczać na samej górze shadow innerHTML, aby style zostały sparsowane przed zbudowaniem pozostałej części DOM. Zapobiega to krótkotrwałemu mignięciu nieostylowanej zawartości, które występuje, gdy style pojawiają się późno w kolejności parsowania.

:host-context(.dark-mode) :host styluje hosta na podstawie selektora przodka znajdującego się poza shadow DOM. Jest to przydatne do stosowania motywu komponentów na podstawie klasy umieszczonej na kontenerze wysokiego poziomu. Obsługa w przeglądarkach jest dobra, ale należy ją sprawdzić w docelowym zestawie przeglądarek.

Globalne resety CSS dokumentu (marginesy body, box-sizing) nie wpływają na drzewa shadow DOM. Potrzebne resety należy zastosować ponownie w każdym shadow root albo współdzielić je za pomocą skonstruowanego arkusza stylów przyjętego przez każdy komponent.

Chrome DevTools pokazuje shadow rooty w panelu Elements pod nazwą "#shadow-root (open)". Można je sprawdzać, edytować i przełączać ich style tak jak każdy inny CSS, w tym pseudoklasę :host i reguły ::part.

Dlaczego niestandardowe właściwości CSS (zmienne) są preferowanym sposobem tworzenia motywów dla komponentu shadow DOM?

Shadow DOM hermetyzuje style w obu kierunkach. Host należy stylować za pomocą :host, punkty integracji motywów udostępniać przez dziedziczone niestandardowe właściwości CSS, a pojedyncze elementy przeznaczone do stylowania udostępniać za pomocą ::part. Arkusze stylów można współdzielić przez adoptedStyleSheets, a resety należy stosować ponownie w każdym shadow root, ponieważ globalny CSS dokumentu nie przekracza tej granicy.