Hva er Shadow DOM?

Denne artikkelen forklarer hva Shadow DOM er.

YouTube Video

Forståelse av Shadow DOM

Shadow DOM er en kraftig funksjon i Web Components-standarden som muliggjør kapsling av stiler og DOM-struktur innenfor komponenter. Denne funksjonen forhindrer interferens av stiler og skript mellom komponenter og hoveddokumentet.

Hva er Shadow DOM?

Shadow DOM gir en måte å opprette et avgrenset DOM-tre tilknyttet et vanlig DOM-element. Dette skyggedokumentet er isolert fra det totale dokumentet, slik at eksterne stiler og skript ikke påvirker det, og interne stiler og skript lekker ikke ut.

For eksempel, hvis du lager en tilpasset knappkomponent ved hjelp av Shadow DOM, vil dens stiler ikke forstyrre andre elementer på siden. På samme måte vil elementer med samme klassenavn ikke komme i konflikt.

Fordeler med Shadow DOM

1. Kapsling: Shadow DOM separerer stiler og funksjonalitet, og forhindrer konflikter med globale stiler og skript.

2. Gjenbrukbarhet: Komponenter bygget med Shadow DOM kan gjenbrukes på tvers av forskjellige prosjekter uten bekymring for stilkonflikter.

3. Vedlikeholdbarhet: Kapsling gjør at komponenter kan være selvstendige når det gjelder logikk og stiler, noe som gjør feilsøking og vedlikehold enklere.

Opprette Shadow DOM

For å bruke Shadow DOM, må du knytte en skyggerot til et HTML-element. Her er et enkelt 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. Vertselement: Et vanlig DOM-element som skyggeroten er knyttet til (i dette tilfellet #shadow-host).

2. Skyggerot: Roten av skyggedokumentet som opprettes ved hjelp av attachShadow.

3. Modus: I åpen modus kan eksternt JavaScript få tilgang til skyggeroten via element.shadowRoot. På den andre siden tillater ikke lukket modus tilgang.

Stilsetting innenfor Shadow DOM

Shadow DOM har sitt eget stilomfang. Stiler definert i shadow-treet gjelder kun for elementer innenfor det treet. 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 om det er motstridende stiler i hoveddokumentet, forblir avsnitt inne i shadow-treet upåvirket:

 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>

Avsnitt inne i Shadow DOM forblir grønne, mens eksterne avsnitt er røde.

Hendelser i Shadow DOM

Hendelser i Shadow DOM ligner vanlige DOM-hendelser, men kan oppføre seg annerledes med hensyn til propagasjon på grunn av kapsling. Hendelser som oppstår i shadow-treet kan boble opp til vertselementet, men bobler ikke direkte opp 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, aktiveres begge lytterne, noe som demonstrerer oppførselen til hendelsesbobling.

Slots: Distribusjon av Light DOM-innhold

Slots lar deg projisere innhold fra Light DOM inn i Shadow DOM. Her er et eksempel:.

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

I hoveddokumentet kan du gjø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-elementene i Shadow DOM viser Light DOM-innhold med den tilsvarende slot-attributtet.

Konklusjon

Shadow DOM er et viktig verktøy for å bygge robuste, gjenbrukbare og vedlikeholdbare webkomponenter. Ved å kapsle inn stiler og funksjonalitet reduserer den potensialet for konflikter og forenkler styring av kodebasen.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video