javascript

Czy wiesz, czym jest Shadow DOM?

16 listopada 2021

Pewnie czytając o Web Componentach dane było Ci słyszeć o Shadow DOM. Pozwala on na przyczepienie się do istniejących elementów DOM (które stają się Shadow Hostem) i wyjście z nich z nowym drzewem DOM.

Jak korzystać z Shadow DOM

Aby to zrobić, potrzebujemy utworzyć uchwyt do elementu z DOM, np.:

var host = document.getElementById("host");

a następnie przypiąć do niego Shadow Root, czyli miejsce, z którego będziemy mogli wyjść z Shadow DOMem:

var root = host.attachShadow({'mode': 'open'});

mode pozwala ustalić, czy z zewnątrz Shadow DOM będziemy mogli mieć do niego dostęp. Może on przyjąć wartość open lub closed.

Na sam koniec do Shadow Root przypinamy kawałek HTMLa:

root.innerHTML = "jestem w shadow DOM!";

Przykład

Całość można zobaczyć na przykładzie:

See the Pen Shadow DOM by Porkite (@Porkite) on CodePen.

Przykład ten pokazuje również, że z Shadow DOM można korzystać jako z samodzielnego feature, bez udziału Web Componentu.

Co nam to wszystko daje?

Umożliwia nam to pisać Web Componenty (lub jak widać na przykładzie - niezależne dodatkowe struktury DOM), które ukrywają swoją strukturę, aby ułatwić czytanie html utworzonej strony.

Dzięki nim możemy też enkapsulować stylizację: style dla naszej aplikacji nie będą wpływać na nasze Shadow DOM-y, a style zadeklarowane w ich wnętrzu nie zmienią wyglądu tego, co znajduje się na zewnątrz.