Shadow DOM w JavaScript

Articles

Ten artykuł wyjaśnia czym jest Shadow DOM w JavaScript.

YouTube Video

javascript-html-shadow-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    h1, h2 {
 32        font-size: 1.2rem;
 33        color: #007bff;
 34        margin-top: 0.5em;
 35        margin-bottom: 0.5em;
 36        border-left: 5px solid #007bff;
 37        padding-left: 0.6em;
 38        background-color: #e9f2ff;
 39    }
 40
 41    button {
 42        display: block;
 43        margin: 1em auto;
 44        padding: 0.75em 1.5em;
 45        font-size: 1rem;
 46        background-color: #007bff;
 47        color: white;
 48        border: none;
 49        border-radius: 6px;
 50        cursor: pointer;
 51        transition: background-color 0.3s ease;
 52    }
 53
 54    button:hover {
 55        background-color: #0056b3;
 56    }
 57
 58    #output {
 59        margin-top: 1em;
 60        background-color: #1e1e1e;
 61        color: #0f0;
 62        padding: 1em;
 63        border-radius: 8px;
 64        min-height: 200px;
 65        font-family: Consolas, monospace;
 66        font-size: 0.95rem;
 67        overflow-y: auto;
 68        white-space: pre-wrap;
 69    }
 70
 71    .highlight {
 72        outline: 3px solid #ffc107; /* yellow border */
 73        background-color: #fff8e1;  /* soft yellow background */
 74        transition: background-color 0.3s ease, outline 0.3s ease;
 75    }
 76
 77    .active {
 78        background-color: #28a745; /* green background */
 79        color: #fff;
 80        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 81        transition: background-color 0.3s ease, box-shadow 0.3s ease;
 82    }
 83  </style>
 84</head>
 85<body>
 86    <div class="container">
 87        <h2>HTML Sample</h2>
 88        <div id="content"></div>
 89        <div id="shadow-host">Shadow Root Element</div>
 90        <my-card></my-card>
 91    </div>
 92
 93    <div class="container">
 94        <h1>JavaScript Console</h1>
 95        <button id="executeBtn">Execute</button>
 96        <div id="output"></div>
 97    </div>
 98
 99    <div>
100        <h2>Slot Sample</h2>
101        <my-element>
102            <h3 slot="header">Header Content</h1>
103            <p slot="content">Main Content</p>
104        </my-element>
105    </div>
106
107    <script>
108        // Override console.log to display messages in the #output element
109        (function () {
110            const originalLog = console.log;
111            console.log = function (...args) {
112                originalLog.apply(console, args);
113                const output = document.getElementById('output');
114                output.textContent += args.map(String).join(' ') + '\n';
115            };
116        })();
117
118        document.getElementById('executeBtn').addEventListener('click', () => {
119            // Prevent multiple loads
120            if (document.getElementById('externalScript')) return;
121
122            const script = document.createElement('script');
123            script.src = 'javascript-html-shadow-dom.js';
124            script.id = 'externalScript';
125            //script.onload = () => console.log('javascript-html-shadow-dom.js loaded and executed.');
126            //script.onerror = () => console.log('Failed to load javascript-html-shadow-dom.js.');
127            document.body.appendChild(script);
128        });
129    </script>
130</body>
131</html>

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.

`Shadow DOM` w JavaScript

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ć.

Zwykła zawartość HTML poza Shadow DOM nazywana jest Light DOM.

Korzyści z `Shadow DOM`

Enkapsulacja
- Shadow DOM oddziela styl i funkcjonalność, zapobiegając konfliktom z globalnymi stylami i skryptami.
Reużywalność
- Komponenty zbudowane z użyciem Shadow DOM mogą być używane ponownie w różnych projektach, bez obaw o konflikty stylów.
Łatwość utrzymania
- Enkapsulacja sprawia, że logika i styl komponentu są samodzielne, 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' });

Wyjaśnienie

Ten kod zawiera następujące elementy:.

Element hosta
- Zwykły element DOM, do którego dołączany jest shadow root (w tym przypadku #shadow-host).
Shadow Root
- Korzeń drzewa shadow utworzony za pomocą attachShadow.
Tryb
- W trybie open zewnętrzny JavaScript ma dostęp do shadow root poprzez 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:.

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

Nawet jeśli w głównym dokumencie występują konfliktujące style, nie wpływają one na akapit wewnątrz drzewa shadow.

1const content = document.getElementById('content');
2content.innerHTML = `
3    <style>
4        p {
5            color: red;
6        }
7    </style>
8    <p>This is in the main DOM.</p>
9`;

Akapit wewnątrz Shadow DOM pozostaje zielony, podczas gdy zewnętrzny jest czerwony.

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.

Oto przykład:.

 1// Add an event listener inside Shadow DOM
 2shadowRoot.innerHTML = `
 3    <div id="button-container">
 4        <button id="shadow-button">Click Me</button>
 5    </div>
 6`;
 7
 8shadowRoot.querySelector('#shadow-button').addEventListener('click', (event) => {
 9    console.log('Button : Button clicked inside Shadow DOM');
10    console.log(event.target);
11});
12
13shadowRoot.querySelector('#button-container').addEventListener('click', (event) => {
14    console.log('Container : Button clicked inside Shadow DOM');
15    console.log(event.target);
16});
17
18hostElement.addEventListener('click', (event) => {
19    console.log('Event bubbled to the host element');
20    console.log(event.target);
21});
22
23document.addEventListener('click', (event) => {
24    console.log('Document listener');
25    console.log(event.target);
26});

Po kliknięciu przycisku oba nasłuchiwacze są uruchamiane, co pokazuje zachowanie propagacji zdarzeń.
Gdy zdarzenie pochodzące z Shadow DOM bąbelkuje do Light DOM, jego target zostaje zmieniony na element hosta zamiast oryginalnego źródła.
- W tym przykładzie, event.target wewnątrz Shadow DOM to faktyczny element button, ale poza Shadow DOM zostaje on zastąpiony przez element hosta div.

`Shadow DOM` i elementy niestandardowe

Shadow DOM i elementy niestandardowe to kluczowe składniki Web Components. Są to technologie używane do tworzenia wielokrotnego użytku i hermetycznych komponentów interfejsu użytkownika.

 1class MyCard extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5        shadow.innerHTML = `
 6        <style>
 7            p {
 8                color: blue;
 9            }
10        </style>
11        <p>I'm inside shadow DOM</p>
12        `;
13    }
14}
15
16customElements.define('my-card', MyCard);

Główny dokument zawiera taki kod HTML:.

1<my-card></my-card>

Dzięki użyciu Shadow DOM wewnątrz elementów niestandardowych można budować komponenty wielokrotnego użytku, odporne na konflikty stylów. W tym kodzie tworzony jest tag o nazwie my-card i przypisywany do klasy MyCard. Element <p> wewnątrz my-card nie jest podatny na zewnętrzne style i jest zawsze wyświetlany na niebiesko.

Sloty: dystrybucja zawartości `Light DOM`

Sloty umożliwiają wstawienie zawartości Light DOM do Shadow DOM. Oto przykład:.

 1class MyElement extends HTMLElement {
 2    constructor() {
 3        super();
 4        const shadow = this.attachShadow({ mode: 'open' });
 5
 6        shadow.innerHTML = `
 7        <style>
 8            .container {
 9                border: 2px solid #ccc;
10                padding: 16px;
11                border-radius: 8px;
12                font-family: sans-serif;
13            }
14            .header {
15                font-size: 1.2em;
16                color: darkblue;
17                margin-bottom: 8px;
18            }
19            .content {
20                font-size: 1em;
21                color: #333;
22            }
23        </style>
24        <div class="container">
25            <div class="header">
26                <slot name="header"></slot>
27            </div>
28            <div class="content">
29                <slot name="content"></slot>
30            </div>
31        </div>
32        `;
33    }
34}
35
36customElements.define('my-element', MyElement);

Główny dokument zawiera taki kod HTML:.

1<my-element>
2    <h3 slot="header">Header Content</h1>
3    <p slot="content">Main Content</p>
4</my-element>

Element slot w Shadow DOM wyświetla zawartość Light DOM z odpowiadającym 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

JavaScript i HTML Obsługa zdarzeń w JavaScripcie

Shadow DOM w JavaScript

YouTube Video

Zrozumienie Shadow DOM

Shadow DOM w JavaScript

Korzyści z Shadow DOM

Tworzenie Shadow DOM

Wyjaśnienie

Stylowanie w ramach Shadow DOM

Zdarzenia w Shadow DOM

Shadow DOM i elementy niestandardowe

Sloty: dystrybucja zawartości Light DOM

Wnioski

YouTube Video

Zrozumienie `Shadow DOM`

`Shadow DOM` w JavaScript

Korzyści z `Shadow DOM`

Tworzenie `Shadow DOM`

Stylowanie w ramach `Shadow DOM`

Zdarzenia w `Shadow DOM`

`Shadow DOM` i elementy niestandardowe

Sloty: dystrybucja zawartości `Light DOM`