Hvad er Shadow DOM?

Denne artikel forklarer, hvad Shadow DOM er.

YouTube Video

Forståelse af Shadow DOM

Shadow DOM er en kraftfuld funktion i Web Components-standarden, der muliggør indkapsling af styles og DOM-struktur inden for komponenter. Denne funktion forhindrer forstyrrelser mellem styles og scripts fra komponenter og hoveddokumentet.

Hvad er Shadow DOM?

Shadow DOM giver en måde at oprette et afgrænset DOM-træ, der er knyttet til et almindeligt DOM-element. Dette skyggetræ er isoleret fra det samlede dokument, hvor eksterne styles og scripts ikke påvirker det, og de interne styles og scripts heller ikke lækker ud.

For eksempel, hvis du opretter en brugerdefineret knappekomponent ved hjælp af Shadow DOM, vil dens styles ikke forstyrre andre elementer på siden. Ligeledes vil elementer med samme klassed navn ikke komme i konflikt.

Fordele ved Shadow DOM

1. Indkapsling: Shadow DOM adskiller styles og funktionalitet og forhindrer konflikter med globale styles og scripts.

2. Genanvendelighed: Komponenter oprettet med Shadow DOM kan genbruges på tværs af forskellige projekter uden at bekymre sig om style-konflikter.

3. Vedligeholdelse: Indkapsling gør det muligt for komponenter at være selvstændige med hensyn til logik og styles, hvilket gør fejlretning og vedligeholdelse lettere.

Oprettelse af Shadow DOM

For at bruge Shadow DOM skal du knytte en shadow root til et HTML-element. Her er et simpelt eksempel:.

 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`;

Forklaring

1. Værts Element: Et almindeligt DOM-element, som shadow root er knyttet til (i dette tilfælde #shadow-host).

2. Shadow Root: Roden af shadow-træet oprettet med attachShadow.

3. Tilstand: I open-tilstand kan ekstern JavaScript få adgang til shadow root via element.shadowRoot. Derimod tillader closed-tilstand ikke adgang.

Styling inden for Shadow DOM

Shadow DOM har sit eget stilområde. Stile defineret inden for skyggetræet gælder kun for elementerne i det træ. Her er et eksempel:.

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

Selv hvis der er modstridende stilarter i hoveddokumentet, forbliver afsnit inde i skyggetræet upåvirkede:

 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>

Afsnit inde i Shadow DOM forbliver grønne, mens eksterne afsnit er røde.

Hændelser inden for Shadow DOM

Hændelser inden for Shadow DOM ligner almindelige DOM-hændelser, men kan opføre sig anderledes med hensyn til forplantning på grund af indkapsling. Hændelser, der opstår inden for skyggetræet, kan boble op til værtselementet, men bobler ikke direkte op til hele dokumentet.

Her er et eksempel:

 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});

Når knappen klikkes, udløses begge lyttere, hvilket demonstrerer adfærden ved hændelsesbobling.

Slots: Distribution af Light DOM-indhold

Slots giver dig mulighed for at projicere indhold fra Light DOM ind i Shadow DOM. Her er et eksempel:.

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

I hoveddokumentet kan du gøre følgende:

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

Slot-elementerne inden for Shadow DOM viser Light DOM-indholdet med det tilsvarende slot-attribut.

Konklusion

Shadow DOM er et vigtigt værktøj til at bygge robuste, genanvendelige og vedligeholdelsesvenlige webkomponenter. Ved at indkapsle stilarter og funktionalitet reduceres potentialet for konflikter, og administrationen af kodebasen forenkles.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video