More

    Jak tworzyć Shadow DOM – enkapsulacja w HTML

    Czym jest technologia Shadow DOM? Jaki ma związek z WebComponents? W jaki sposób można ją wykorzystać? O tym w poniższym wpisie.

    Mój poprzedni post traktował o komponentach w HTML, czyli o tzw. WebComponents. Kontynuujemy ten temat, biorąc tym razem na warsztat Shadow DOM, o której wspomniałem już w poprzednim wpisie. Ta technologia znajduje zastosowanie głównie w WebComponents, chociaż można jej też użyć na standardowych elementach. W tym wpisie omówię czym jest i jakie możliwości nam daje.

    Czym jest Shadow DOM i jakie ma zastosowanie?

    Jeszcze nie tak dawno, kod pisany w HTML lub CSS był globalny. Stanowiło to dość duży problem, ponieważ musieliśmy uważać, aby CSS tworzone na potrzeby jednego obszaru strony, nie popsuły innego. Albo by kod JS szukający elementów na stronie znalazł tylko te, z interesującego nas obszaru. Shadow DOM jest standardem, który pozwala nam osiągnąć enkapsulację w kodzie HTML i CSS, co z kolei pozwoli na uniknięcie powyższych błędów.

    Dzięki niemu możemy tworzyć prostszy kod CSS oraz elementy HTML, ponieważ nie musimy już tworzyć takich nazw klas, które na pewno będą unikalne. Jedynym, na co musimy zwracać uwagę, to ich unikalność w obrębie jednego Shadow DOM.

    Najczęstszym zastosowaniem jest stworzenie WebComponents. Jednak możemy z niej korzystać także w sposób tradycyjny, poza WebComponents.

    Sama technologia nie jest czymś zupełnie nowym. HTML już korzystał z takich możliwości do tworzenia bardziej skomplikowanych elementów. Za przykład może posłużyć element video, który dzięki temu rozwiązaniu posiada schowane opcje sterowania odtwarzanym filmem. Przyjrzyjmy się teraz, w jaki sposób sami możemy tworzyć elementy korzystające z tej technologii.

    Struktura

    Spójrzmy jak wygląda struktura dla tego rozwiązania. Shadow DOM jest po prostu specjalnym drzewem, umieszczonym w głównym drzewie DOM. Dobrze pokazuje to poniższy schemat.

    Doskonale znany nam document jest głównym elementem struktury DOM na stronie. Do niego podpięte są inne elementy. Dodatkowo, możemy wydzielić Shadow DOM, które zostanie podpięte do jednego ze standardowych elementów na stronie lub do customowego elementu i będzie pełniło rolę hosta dla Shadow DOM (czerwone kółko na schemacie). Od hosta tworzy się całe drzewo shadow.

    Ten sam element, który w dokumencie pełni rolę shadow host, wewnątrz drzewa shadow, będzie pełnił rolę roota.

    Tworzenie Shadow DOM

    Służy do tego funkcja attachShadow, którą musimy wywołać na standardowym elemencie, który będzie pełnił rolę hosta albo mówiąc prościej – punktu zaczepienia dla naszego Shadow DOM-a.

    Zwracana wartość będzie odnośnikiem do naszego rozwiązania i pozwoli nam go modyfikować.

    Jako argument funkcji attachShadow podajemy obiekt, w którym określamy mode. Mamy dwie opcje do wyboru:

    • open – w przypadku tej opcji możemy znaleźć oraz modyfikować elementy znajdujące się w Shadow DOM z poziomu naszego głównego kodu JS. W takiej sytuacji możemy zastosować poniższy kod:
    shadow root

    Za pomocą pola shadowRoot możemy odnieść się do drzewa Shadow w naszym host elemencie.

    • close – w przypadku tej opcji nie możemy odnieść się do Shadow DOM z zewnątrz. Pole shadowRoot będzie null.

    Stylowanie Shadow DOM

    Style tworzone w głównych plikach CSS aplikacji nie zostaną zaaplikowane na elementy znajdujące się wewnątrz Shadow DOM. Jak wspomniałem wcześniej, również style stworzone wewnątrz opisywanej technologii nie “wydostaną” się poza strukturę. Dzięki temu możemy używać znacznie prostszych selektorów. Zobaczmy zatem w jaki sposób możemy dodać style wewnątrz omawianej technologii.

    Pierwsza opcja to utworzenie elementu style.

    style

    Drugim sposobem jest zdefiniowanie stylów w osobnym pliku CSS i dodanie elementu link.

    shadow dom

    Dodatkowo, mamy do dyspozycji selektor CSS :host. Za jego pomocą możemy odnieść się do elementu hosta, do którego jest zamontowany Shadow DOM i zmodyfikować jego style.

    shadow dom

    Powyższy kod spowoduje, że element z klasą shadow-open-host będzie posiadał żółte tło.

    Eventy

    Niektóre eventy, które zachodzą na elementach wewnątrz Shadow DOM możemy przechwycić na elemencie root. Takimi eventami są:

    • focus np. blur, focus,
    • eventy myszki np. click, mousedown, wheel,
    • input np. input,
    • eventy klawiatury np. keydown,
    • drag np. dragstart,
    • composition np. compositionstart.

    Do tego dochodzą jeszcze nasze własne eventy, które, aby były widoczne, musimy stworzyć z flagą composed ustawioną na true. Tylko wtedy nasz element root będzie mógł nasłuchiwać naszego eventu.

    shadow dom

    Tak przygotowany event może “wydostać się” poza Shadow DOM.

    Element slot

    Dzięki temu elementowi możemy wskazać, gdzie ma wyświetlić się zawartość przekazana jako dziecko głównego węzła. Popatrzmy na przykład z WebComponents.

    shadow dom

    Aby wewnątrz wyświetlił się napis “Operation failed”, musimy jasno wskazać, gdzie powinien się wyświetlić. Właśnie do tego służy element slot.

    slot

    W miejscu komponentu slot pojawi się przekazana treść. Dodatkowo, mamy możliwość definiowania kilku slotów i ich nazywania.

    shadow dom

    Podsumowanie

    W tym wpisie, dokładniej omówiłem czym jest Shadow DOM, które znajduje zastosowanie głównie w WebComponents. Możliwość odseparowania naszego kodu od reszty aplikacji jest bardzo przydatna i pozwala na uniknięcie wielu problemów oraz łatwiejszy rozwój aplikacji. Jeśli macie jakieś spostrzeżenia lub przemyślenia na ten temat, podzielcie nimi w komentarzu pod postem.

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    11 bibliotek, które powinien znać każdy iOS developer

    Przez dwanaście lat, App Store mocno zadomowił się na naszych urządzeniach mobilnych, oferując coraz to większą różnorodność aplikacji. W tym roku ich...

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    Hacktoberfest – ten hackathon to małe piwo

    Hackathon to wydarzenie programistyczne polegające na zrealizowaniu w określonym czasie projektu zgodnego założeniami organizatora. Większość z was pewnie kojarzy słowo Hackathon. Najczęściej...

    #IThotStory, czyli największe wpadki programistów

    Co prawda programista to nie saper i może pomylić się więcej niż raz, ale każda wpadka niesie za sobą jakieś ryzyko. Zaliczyliście...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X