Elementy slot do dystrybucji treści

Dzieci zapisane wewnątrz elementu niestandardowego w kodzie HTML tworzą jego "light DOM" — nie należą do drzewa shadow DOM. Domyślnie przeglądarka ich nie renderuje; drzewo shadow DOM musi jawnie zażądać ich wyświetlenia za pomocą <slot>.

Element <slot> wewnątrz drzewa shadow DOM wyznacza miejsce, w którym powinny pojawić się dzieci light DOM. Slot bez nazwy jest slotem domyślnym i przyjmuje każde bezpośrednie dziecko hosta.

Do wielu slotów można odwoływać się za pomocą nazw. Drzewo shadow DOM deklaruje <slot name="header">, a użytkownik zgłasza element za pomocą <h1 slot="header">. Dzieci z pasującym atrybutem slot wypełniają ten slot, a niedopasowane dzieci trafiają do slotu domyślnego.

Zawartość umieszczona między znacznikami slotu jest renderowana tylko wtedy, gdy do slotu nic nie przypisano: <slot>No content provided</slot>. Należy jej używać do wyświetlania tekstu zastępczego lub instrukcji w pustych slotach.

Dzieci umieszczone w slotach pozostają w light DOM i dziedziczą style z głównego dokumentu, a nie z drzewa shadow DOM. Aby stylować je z wnętrza shadow DOM, należy użyć pseudoelementu ::slotted(): ::slotted(p) { color: red; }.

::slotted() może wskazywać tylko bezpośrednie dzieci hosta (elementy faktycznie rozdzielane do slotu). Nie może wskazywać ich potomków. Do stylowania głębiej zagnieżdżonych elementów należy udostępnić niestandardowe właściwości CSS lub użyć ::part na elementach wewnętrznych shadow DOM.

Każdy slot emituje zdarzenie slotchange, gdy zmienią się przypisane do niego węzły. Należy go nasłuchiwać, aby reagować na dynamiczne aktualizacje zawartości: slot.addEventListener("slotchange", handler). Jest to przydatne w komponentach, których układ zależy od obecności konkretnych dzieci.

slot.assignedNodes() zwraca wszystkie węzły przypisane do slotu (w tym węzły tekstowe). slot.assignedElements() zwraca tylko dzieci typu Element — zwykle właśnie tej metody należy używać podczas programowego iterowania po zawartości umieszczonej w slocie.

Przeglądarka automatycznie zajmuje się całym rozdzielaniem na podstawie atrybutu slot każdego dziecka. Nie jest potrzebny żaden krok w JavaScript — wystarczy umieścić <span slot="footer">...</span> w dzieciach light DOM hosta, a odpowiadający mu slot w drzewie shadow DOM będzie go zawierać.

Style samego hosta (ustawione dla <my-card> w dokumencie) kaskadowo stosują się do dzieci light DOM, w tym do tych, które ostatecznie trafiają do slotów. CSS shadow DOM za pomocą ::slotted ma większą specyficzność niż dziedziczone style hosta, gdy oba dotyczą tej samej właściwości.

Karty ze slotami nagłówka, treści i stopki, okna dialogowe ze slotami tytułu, zawartości i akcji, elementy listy ze slotami początku i końca, menu nawigacyjne ze slotami elementów. Sloty sprawiają, że elementy niestandardowe można komponować w taki sam sposób jak <details>/<summary> lub <table>/<tr>.

Sloty umieszczają dzieci light DOM w określonych miejscach drzewa shadow DOM. Slot domyślny przyjmuje każde nienazwane dziecko, a sloty nazwane — dzieci z pasującymi atrybutami slot. Zapasowa zawartość wypełnia puste sloty, ::slotted służy do stylowania bezpośrednich dzieci umieszczonych w slotach, a zdarzenia slotchange pozwalają reagować na dynamiczne aktualizacje zawartości.