Czy wiesz, czym jest Shadow DOM?
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.
Podobne wpisy
