Vad är Shadow DOM?

Den här artikeln förklarar vad Shadow DOM är.

YouTube Video

Förstå Shadow DOM

Shadow DOM är en kraftfull funktion inom Web Components-standarden som möjliggör inkapsling av stilar och DOM-struktur inom komponenter. Denna funktion förhindrar störningar mellan stilar och skript i komponenter och huvuddokumentet.

Vad är Shadow DOM?

Shadow DOM ger ett sätt att skapa ett avgränsat DOM-träd kopplat till ett vanligt DOM-element. Detta skuggträd är isolerat från det övergripande dokumentet, där externa stilar och skript inte påverkar det och dess interna stilar och skript inte läcker ut.

Till exempel, om du skapar en anpassad knappkomponent med Shadow DOM, kommer dess stilar inte att störa andra element på sidan. På samma sätt kommer element med samma klassnamn inte att orsaka konflikter.

Fördelar med Shadow DOM

1. Inkapsling: Shadow DOM separerar stilar och funktionalitet, vilket förhindrar konflikter med globala stilar och skript.

2. Återanvändbarhet: Komponenter skapade med Shadow DOM kan återanvändas i olika projekt utan att oroa sig för stilkonflikter.

3. Underhållbarhet: Inkapsling gör att komponenter kan vara självförsörjande i logik och stilar, vilket gör felsökning och underhåll enklare.

Skapa Shadow DOM

För att använda Shadow DOM måste du fästa en skuggrot till ett HTML-element. Här är ett enkelt exempel:.

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

Förklaring

1. Värdelement: Ett vanligt DOM-element till vilket skuggroten är kopplad (i detta fall #shadow-host).

2. Skuggrot: Roten till skuggträdet skapat med attachShadow.

3. Läge: I open-läget kan extern JavaScript komma åt skuggroten via element.shadowRoot. Å andra sidan tillåter inte closed-läget åtkomst.

Stilhantering inom Shadow DOM

Shadow DOM har sitt eget stilområde. Stilar som definieras inom skuggan trädet gäller endast för elementen inom det trädet. Här är ett exempel:.

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

Även om det finns konfliktiga stilar i huvuddokumentet påverkas inte stycken inuti skuggträdet:

 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>

Stycken inuti Shadow DOM förblir gröna, medan externa stycken är röda.

Händelser inom Shadow DOM

Händelser inom Shadow DOM liknar vanliga DOM-händelser men kan bete sig annorlunda vad gäller spridning på grund av kapsling. Händelser som inträffar inom skuggträdet kan bubbla upp till host-elementet men sprider sig inte direkt till hela dokumentet.

Här är ett exempel:

 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 klickas på aktiveras båda lyssnarna, vilket demonstrerar beteendet för händelsebubbling.

Slotar: Projektering av Light DOM-innehåll

Slotar gör det möjligt att projektera innehåll från Light DOM till Shadow DOM. Här är ett exempel:.

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

I huvuddokumentet kan du göra följande:

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

Slot-elementen inom Shadow DOM visar Light DOM-innehåll med det motsvarande slot-attributet.

Slutsats

Shadow DOM är ett viktigt verktyg för att bygga robusta, återanvändbara och underhållbara webbkomponenter. Genom att kapsla in stilar och funktioner minskar det risken för konflikter och förenklar hantering av kodbasen.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video