Co to jest Shadow DOM?

Ten artykuł wyjaśnia, czym jest Shadow DOM.

YouTube Video

Zrozumienie Shadow DOM

Shadow DOM to potężna funkcja standardu Web Components, która umożliwia kapsułkowanie stylów i struktury DOM wewnątrz komponentów. Ta funkcja zapobiega ingerencji stylów i skryptów pomiędzy komponentami a głównym dokumentem.

Co to jest Shadow DOM?

Shadow DOM umożliwia stworzenie odrębnego drzewa DOM przypisanego do standardowego elementu DOM. To drzewo cieniowe jest odizolowane od reszty dokumentu – zewnętrzne style i skrypty nie mają na nie wpływu, a jego wewnętrzne style i skrypty nie 'wyciekają'.

Na przykład, jeśli utworzysz niestandardowy komponent przycisku za pomocą Shadow DOM, jego style nie wpłyną na inne elementy na stronie. Podobnie, elementy z taką samą nazwą klasy nie będą ze sobą kolidować.

Korzyści z Shadow DOM

1. Kapsułkowanie: Shadow DOM oddziela style i funkcjonalność, zapobiegając konflikcie z globalnymi stylami i skryptami.

2. Wielokrotne użycie: Komponenty zbudowane przy użyciu Shadow DOM mogą być wykorzystywane w różnych projektach bez obaw o konflikty stylów.

3. Łatwość utrzymania: Kapsułkowanie umożliwia komponentom bycie samodzielnymi pod względem logiki i stylów, co ułatwia debugowanie i utrzymanie.

Tworzenie Shadow DOM

Aby korzystać z Shadow DOM, należy dołączyć korzeń cieniowy do elementu HTML. Oto prosty przykład:.

 1// Select the host element
 2const hostElement = document.querySelector('#shadow-host');
 3
 4// Attach a shadow root
 5const shadowRoot = hostElement.attachShadow({ mode: 'open' });
 6
 7// Add content to the shadow root
 8shadowRoot.innerHTML = `
 9  <style>
10    p {
11      color: blue;
12      font-weight: bold;
13    }
14  </style>
15  <p>This is inside the Shadow DOM!</p>
16`;

Wyjaśnienie

1. Element hosta: Standardowy element DOM, do którego dołączony jest korzeń cieniowy (w tym przypadku #shadow-host).

2. Korzeń cieniowy: Korzeń drzewa cieniowego utworzony przy użyciu attachShadow.

3. Tryb: W trybie open, zewnętrzny JavaScript może uzyskać dostęp do korzenia cieniowego za pomocą element.shadowRoot. Z kolei tryb closed nie pozwala na dostęp.

Stylowanie w ramach Shadow DOM

Shadow DOM ma własny zakres stylów. Style zdefiniowane w drzewie cieniowym odnoszą się wyłącznie do elementów w tym drzewie. Oto przykład:.

1shadowRoot.innerHTML = `
2  <style>
3    p {
4      color: green;
5    }
6  </style>
7  <p>Scoped style inside Shadow DOM.</p>
8`;

Nawet jeśli w głównym dokumencie występują konflikty stylów, paragrafy wewnątrz drzewa cieniowego pozostają nienaruszone:

 1<style>
 2  p {
 3    color: red;
 4  }
 5</style>
 6<p>This is in the main DOM.</p>
 7<div id="shadow-host"></div>
 8<script>
 9  // JavaScript code to create the shadow DOM
10</script>

Paragrafy wewnątrz Shadow DOM są zielone, podczas gdy paragrafy zewnętrzne są czerwone.

Zdarzenia w Shadow DOM

Zdarzenia w Shadow DOM są podobne do typowych zdarzeń DOM, ale mogą zachowywać się inaczej w zakresie propagacji z powodu kapsułkowania. Zdarzenia, które zachodzą w drzewie cieniowym, mogą propagować się do elementu hosta, ale nie bezpośrednio do całego dokumentu.

Oto przykład:

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3  <button id="shadow-button">Click Me</button>
 4`;
 5
 6shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 7  console.log('Button clicked inside Shadow DOM');
 8});
 9
10// Add an event listener on the host
11hostElement.addEventListener('click', (event) => {
12  console.log('Event bubbled to the host element');
13});

Po kliknięciu przycisku oba nasłuchiwacze są uruchamiane, co pokazuje zachowanie propagacji zdarzeń.

Sloty: Dystrybucja treści Light DOM

Sloty pozwalają na przenoszenie treści z Light DOM do Shadow DOM. Oto przykład:.

1shadowRoot.innerHTML = `
2  <slot name="header"></slot>
3  <slot name="content"></slot>
4`;

W głównym dokumencie można postąpić w następujący sposób:

1<div id="shadow-host">
2  <h1 slot="header">Header Content</h1>
3  <p slot="content">Main Content</p>
4</div>

Elementy slot w Shadow DOM wyświetlają treści Light DOM zgodnie z odpowiadającym im atrybutem slot.

Wnioski

Shadow DOM to kluczowe narzędzie do tworzenia solidnych, wielokrotnego użytku i łatwych w utrzymaniu komponentów webowych. Dzięki kapsułkowaniu stylów i funkcjonalności zmniejsza możliwość konfliktów i upraszcza zarządzanie bazą kodu.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video