Was ist Shadow DOM?

Dieser Artikel erklärt, was Shadow DOM ist.

YouTube Video

Verständnis von Shadow DOM

Shadow DOM ist eine leistungsstarke Funktion des Web-Components-Standards, die die Kapselung von Stilen und DOM-Strukturen innerhalb von Komponenten ermöglicht. Diese Funktion verhindert, dass sich Stile und Skripte zwischen Komponenten und dem Hauptdokument gegenseitig stören.

Was ist Shadow DOM?

Shadow DOM bietet eine Möglichkeit, einen begrenzten DOM-Baum zu erstellen, der mit einem normalen DOM-Element verknüpft ist. Dieser Schatten-Baum ist vom gesamten Dokument isoliert, sodass externe Stile und Skripte ihn nicht beeinflussen können und seine internen Stile und Skripte nicht nach außen dringen.

Wenn Sie beispielsweise eine benutzerdefinierte Schaltflächenkomponente mit Shadow DOM erstellen, beeinflussen deren Stile andere Elemente auf der Seite nicht. Ebenso führen Elemente mit dem gleichen Klassennamen nicht zu Konflikten.

Vorteile von Shadow DOM

1. Kapselung: Shadow DOM trennt Stile und Funktionalität, um Konflikte mit globalen Stilen und Skripten zu vermeiden.

2. Wiederverwendbarkeit: Mit Shadow DOM erstellte Komponenten können in verschiedenen Projekten wiederverwendet werden, ohne sich über Stilkonflikte Gedanken zu machen.

3. Wartbarkeit: Durch die Kapselung können Komponenten in Bezug auf Logik und Stile eigenständig bleiben, was das Debuggen und die Wartung erleichtert.

Erstellen von Shadow DOM

Um Shadow DOM zu verwenden, müssen Sie eine Schattenwurzel an ein HTML-Element anhängen. Hier ist ein einfaches Beispiel:.

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

Erklärung

1. Host-Element: Ein normales DOM-Element, an das die Schattenwurzel angehängt ist (in diesem Fall #shadow-host).

2. Schattenwurzel: Die Wurzel des Schatten-Baums, die mit attachShadow erstellt wird.

3. Modus: Im open-Modus kann externes JavaScript auf die Schattenwurzel über element.shadowRoot zugreifen. Im Gegensatz dazu erlaubt der closed-Modus keinen Zugriff.

Styling innerhalb von Shadow DOM

Shadow DOM hat einen eigenen Stilbereich. Stile, die im Schattenbaum definiert sind, gelten nur für die Elemente innerhalb dieses Baums. Hier ist ein Beispiel:.

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

Auch wenn es im Hauptdokument widersprüchliche Stile gibt, bleiben Absätze im Schattenbaum davon unberührt:

 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>

Absätze im Shadow DOM bleiben grün, während externe Absätze rot sind.

Ereignisse innerhalb des Shadow DOM

Ereignisse innerhalb des Shadow DOM ähneln normalen DOM-Ereignissen, können sich jedoch aufgrund der Kapselung in Bezug auf ihre Ausbreitung anders verhalten. Ereignisse, die im Schattenbaum auftreten, können zum Host-Element hochblubbern, aber nicht direkt zum gesamten Dokument.

Hier ist ein Beispiel:

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

Wenn der Button geklickt wird, werden beide Listener ausgelöst, was das Verhalten beim Event-Bubbling demonstriert.

Slots: Verteilung von Light DOM-Inhalten

Slots ermöglichen es, Inhalte aus dem Light DOM in das Shadow DOM zu projizieren. Hier ist ein Beispiel:.

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

Im Hauptdokument können Sie wie folgt vorgehen:

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

Die slot-Elemente innerhalb des Shadow DOM zeigen Light DOM-Inhalte mit dem entsprechenden slot-Attribut an.

Fazit

Shadow DOM ist ein wichtiges Werkzeug zum Erstellen robuster, wiederverwendbarer und wartbarer Webkomponenten. Durch die Kapselung von Stilen und Funktionen wird das Konfliktpotenzial reduziert und die Verwaltung des Codebestands vereinfacht.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video