JavaScript Academy · Lekcja

Shadow DOM i hermetyzacja

Proszę izolować style i znaczniki w korzeniach shadow.

Shadow DOM i hermetyzacja to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest Shadow DOM

Shadow DOM nadaje elementowi prywatne, hermetyzowane drzewo DOM. Znaczniki i style znajdujące się w jego wnętrzu są odizolowane od reszty strony.

CSS z zewnątrz nie przenika do środka.
CSS ze środka nie przenika na zewnątrz.
Wewnętrzna struktura jest ukryta przed standardowymi zapytaniami DOM.

attachShadow

Drzewo cienia tworzy się przez wywołanie this.attachShadow({ mode: 'open' }). Zwraca ono korzeń cienia, który można wypełniać tak jak zwykły węzeł.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

Tryby open i closed

Opcja mode określa dostęp z zewnątrz:

'open' — do korzenia można uzyskać dostęp za pomocą element.shadowRoot.
'closed' — element.shadowRoot zwraca null; tylko kod komponentu przechowuje odwołanie.

Większość komponentów używa 'open', ponieważ ułatwia to debugowanie.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Wypełnianie korzenia cienia

Ustaw shadowRoot.innerHTML, aby zbudować hermetyzowaną zawartość. Te znaczniki są niewidoczne dla document.querySelector.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Style ograniczone zakresem

Znacznik style wewnątrz korzenia cienia wpływa wyłącznie na ten korzeń. Ten sam selektor poza komponentem pozostaje bez zmian, a style strony nie przenikają do środka.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Selektor :host

W stylach cienia :host wskazuje sam element niestandardowy, czyli hosta drzewa cienia. Należy używać go do stylowania zewnętrznego obszaru komponentu.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Izolacja stylów w praktyce

Hermetyzacja oznacza, że autorzy komponentów i stron nie muszą już rywalizować o nazwy klas. Reguła .title wewnątrz jednego komponentu nigdy nie wpłynie na element .title w innym miejscu.

Brak globalnych konfliktów CSS.
Proste, ogólne selektory znów są bezpieczne.

Wyszukiwanie w korzeniu cienia

Aby uzyskać dostęp do wewnętrznych węzłów, należy przeszukiwać korzeń cienia, a nie dokument. Korzeń cienia obsługuje te same metody wyszukiwania.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Zdarzenia przekraczają granicę

Wiele zdarzeń (takich jak click) bąbelkuje poza Shadow DOM, ale jest retargetowanych, dlatego nasłuchiwacze zewnętrzne widzą element hosta, a nie węzeł wewnętrzny. Zachowuje to hermetyzację.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Style dziedziczone

Niektóre właściwości CSS (takie jak color i font-family) dziedziczą się przez granicę Shadow DOM, ponieważ dziedziczenie przebiega w dół złożonego drzewa. Można dopasować komponent do wyglądu strony, polegając na dziedziczeniu lub używając niestandardowych właściwości CSS.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Kiedy używać Shadow DOM

Warto użyć Shadow DOM, gdy potrzebna jest silna izolacja stylów i znaczników w wielokrotnego użytku komponencie. Należy go pominąć, gdy komponent ma swobodnie dziedziczyć globalne style strony i uczestniczyć w ich działaniu.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat Shadow DOM.

Podsumowanie

Poznałeś Shadow DOM:

attachShadow({ mode }) tworzy odizolowane drzewo.
'open' udostępnia shadowRoot, a 'closed' je ukrywa.
Wewnętrzne znaczniki style działają w obrębie korzenia, a :host styluje sam element.
Zapytania wykonuje się względem korzenia cienia, a nie dokumentu.
Zdarzenia są retargetowane, aby zachować hermetyzację.

Następnie ponownie wykorzystamy znaczniki za pomocą template i slotów.

Często zadawane pytania

Czy lekcja „Shadow DOM i hermetyzacja” jest bezpłatna?

Tak — pełny tekst „Shadow DOM i hermetyzacja” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Shadow DOM i hermetyzacja”?

Proszę izolować style i znaczniki w korzeniach shadow. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Shadow DOM i hermetyzacja”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy