attachShadow i Shadow Root

Shadow DOM nadaje elementowi własne, odizolowane drzewo DOM („drzewo cienia”), które nie pojawia się w głównym DOM-ie strony. Zewnętrzny CSS nie przenika do środka, a wewnętrzny CSS nie wydostaje się na zewnątrz — to doskonała enkapsulacja komponentów.

Należy wywołać this.attachShadow({ mode: "open" }) w konstruktorze elementu niestandardowego lub w connectedCallback. Metoda zwraca ShadowRoot, który można wypełnić tak jak zwykłe drzewo DOM, używając innerHTML, appendChild itp.

mode: "open" udostępnia drzewo cienia jako element.shadowRoot. mode: "closed" je ukrywa — element.shadowRoot zwraca null, więc zewnętrzne skrypty nie mogą wejść do tego drzewa. Tryb zamknięty rzadko jest praktycznie przydatny, ponieważ ten sam kod, który zdefiniował element, i tak może zachować własne odwołanie.

Style zdefiniowane wewnątrz drzewa cienia (za pomocą <style> lub arkuszy stylów adopted stylesheets) mają zastosowanie tylko w tym drzewie cienia. Selektory CSS w głównym dokumencie nigdy nie pasują do potomków drzewa cienia, a style drzewa cienia nie przenikają do dokumentu.

Wewnątrz drzewa cienia element hosta (czyli sam element niestandardowy) wybiera się za pomocą specjalnej pseudoklasy :host. :host(.large) pasuje, gdy host ma klasę .large; :host([disabled]) pasuje, gdy host ma atrybut disabled.

Elementy niestandardowe domyślnie mają display: inline. Wewnątrz Shadow Root należy zastosować :host { display: block }, aby element zachowywał się jak komponent blokowy. Pominięcie tego ustawienia jest częstą przyczyną błędów typu „width: 100% jest ignorowane”.

Zdarzenia, które propagują się poza drzewo cienia, są przekierowywane na hosta. Kliknięcie wewnętrznego przycisku dociera do zewnętrznych nasłuchiwaczy z wartością event.target === host. Jeśli potrzebują Państwo rzeczywistego celu wewnętrznego, należy użyć event.composedPath().

Niestandardowe zdarzenia wysyłane wewnątrz shadow root nie przekraczają granicy, chyba że zostaną utworzone zarówno z opcją bubbles: true, jak i composed: true. Bez composed zewnętrzne nasłuchiwacze na hoście nigdy nie zobaczą zdarzenia.

Zewnętrzne skrypty mogą wyszukiwać element hosta, ale nie jego potomków shadow DOM. document.querySelector("my-card span") nic nie zwróci, jeśli element <span> znajduje się wewnątrz drzewa shadow DOM. Hermetyzacja chroni elementy wewnętrzne przed przypadkowymi zależnościami.

Gdy w kodzie HTML elementu znajduje się <template shadowrootmode="open">, przeglądarka buduje drzewo shadow DOM podczas parsowania, bez użycia JavaScriptu. Dzięki temu komponenty renderowane po stronie serwera są przyjazne dla procesu hydratacji, ponieważ drzewo shadow DOM istnieje jeszcze przed uruchomieniem JavaScriptu.

Każdy shadow root wiąże się z pewnym narzutem — dodatkowym zakresem stylów i dodatkową warstwą renderowania. Setki shadow rootów nie stanowią problemu, ale dziesiątki tysięcy mogą mieć znaczenie. W interfejsach o bardzo dużej gęstości (duże tabele, listy wirtualizowane) należy wykonać profilowanie, aby potwierdzić, że koszty shadow DOM są akceptowalne.

Co umożliwia tryb open, czego nie umożliwia tryb closed?

attachShadow({ mode: "open" }) tworzy izolowane poddrzewo DOM, w którym style CSS i identyfikatory nie przenikają w żadnym kierunku. Host należy stylować za pomocą :host, pamiętać o display: block i używać composed: true w przypadku zdarzeń, które muszą wydostać się na zewnątrz. Poza tym drzewo shadow DOM działa jak zwykły DOM — innerHTML, appendChild i querySelector działają w nim normalnie.