Deklaratywny Shadow DOM

Tradycyjny Shadow DOM jest tworzony za pomocą JavaScriptu (attachShadow). W przypadku stron renderowanych po stronie serwera oznacza to, że drzewo cieni jest puste do momentu uruchomienia JavaScriptu — co niweczy cel SSR, czyli dostarczenie kompletnego HTML-u już przy pierwszym bajcie. Declarative Shadow DOM rozwiązuje ten problem.

Element <template> z atrybutem shadowrootmode="open" deklaruje root cienia w HTML-u w momencie parsowania. Przeglądarka automatycznie dołącza root cienia do elementu nadrzędnego, a zawartość template staje się drzewem cieni. JavaScript nie jest wymagany.

Declarative Shadow DOM umożliwia prawdziwe renderowanie komponentów webowych po stronie serwera: serwer umieszcza całe drzewo cieni bezpośrednio w dokumencie, przeglądarka parsuje je i dołącza przed uruchomieniem jakiegokolwiek JavaScriptu, a JavaScript odpowiedzialny za hydrację może przejąć kontrolę nad w pełni wyrenderowaną bazą. Zapewnia to możliwości SSR na równi z frameworkami.

Dostępne są te same tryby co w imperatywnym attachShadow: shadowrootmode="open" udostępnia cień jako element.shadowRoot, a shadowrootmode="closed" go ukrywa. Zachowanie jest identyczne jak w przypadku odpowiednika dołączonego za pomocą JavaScriptu.

Przeglądarka dołącza root cienia przy pierwszym napotkaniu elementu <template shadowrootmode>. Po dołączeniu template zostaje zużyty — późniejsze wyszukiwanie go nic nie zwróci. Odpowiada to cyklowi życia attachShadow: cień istnieje przez cały czas życia elementu.

Dzieci light DOM-u (element <p> znajdujący się poza elementem <template> w przykładzie) są wstawiane do elementów <slot> wewnątrz drzewa cieni, tak samo jak w przypadku imperatywnego Shadow DOM-u. Sposób kompozycji jest identyczny — różni się tylko mechanizm dołączania.

Jeśli <my-card> jest zarejestrowanym custom elementem, proces aktualizacji wykorzystuje już dołączony root cienia zamiast ponownie wywoływać attachShadow. Klasa custom elementu może odczytać this.shadowRoot w swoim connectedCallback bez konieczności jego tworzenia.

render z Lit-html, komponenty Astro i kilka innych frameworków emituje teraz Declarative Shadow DOM jako część danych wyjściowych SSR. Samodzielna implementacja również jest możliwa: każdy system szablonów oparty na ciągach znaków może wygenerować template z atrybutem shadowrootmode.

Declarative Shadow DOM jest dostępny w Chrome, Edge, Safari i Firefoxie. Starsze przeglądarki po cichu ignorują element <template> — jego zawartość jest niewidoczna, co zapewnia łagodne pogorszenie działania w środowiskach bez obsługi tej funkcji.

Aby zapewnić szerszą obsługę, niewielki skrypt może przejść po DOM-ie i przekształcić elementy template[shadowrootmode] w rzeczywiste rooty cienia. Uruchom go przed zarejestrowaniem jakichkolwiek custom elements, aby późniejsze aktualizacje komponentów zobaczyły oczekiwane drzewo cieni.

Declarative Shadow DOM powiela strukturę: zawartość <template> znajduje się w HTML-u, mimo że jest również zawarta w klasie komponentu. W przypadku stron zawierających wiele takich samych komponentów zwiększa to rozmiar danych. Frameworki usuwają duplikaty; w przypadku własnej implementacji SSR warto rozważyć to samo.

Jeśli dostarczają Państwo web components i zależy Państwu na renderowaniu od pierwszego bajtu lub na SEO — warto wdrożyć tę funkcję już teraz. Jest stabilna, obsługiwana i znacząco poprawia SSR w aplikacjach opartych na web components. Nie ma zastosowania w aplikacjach, które nie używają Shadow DOM-u.

Jaki problem rozwiązuje Declarative Shadow DOM w porównaniu z imperatywnym attachShadow?

Declarative Shadow DOM wykorzystuje <template shadowrootmode="open"> wewnątrz custom elementu, aby dołączyć root cienia w momencie parsowania, bez potrzeby użycia JavaScriptu. Umożliwia prawdziwe SSR dla web components: drzewo cieni, style z zakresem ograniczonym do komponentu i sloty działają jeszcze przed hydracją. Funkcja jest obsługiwana we wszystkich nowoczesnych przeglądarkach, a dla starszych dostępny jest polyfill. Frameworki (Lit, Astro) emitują ją automatycznie.