Was ist Shadow DOM?

Shadow DOM ist ein Web-Standard, der es ermöglicht, HTML, CSS und JavaScript in separate, vom Hauptdokument isolierte Blöcke zu kapseln.

Hauptkonzepte:

• Shadow Host: DOM-Element, an das Shadow DOM angehängt wird.
• Shadow Tree: Isolierter DOM-Baum.
• Shadow Boundary: Grenze zwischen Shadow DOM und dem Hauptdokument.
• Shadow Root: Wurzelknoten des Shadow Tree. Wird mit element.attachShadow({ mode: 'open' | 'closed' }) erstellt:
  • open: Shadow Root ist von außen über element.shadowRoot zugänglich.
  • closed: Shadow Root ist von außen nicht zugänglich.

Vorteile:

• Stil-Kapselung: In Shadow DOM definierte Stile dringen nicht nach außen durch und beeinflussen das Hauptdokument nicht. Standardmäßig beeinflussen Stile des Hauptdokuments den Shadow DOM nicht, dies kann jedoch kontrolliert werden.
• DOM-Kapselung: Elemente innerhalb des Shadow DOM sind im Haupt-DOM-Baum nicht sichtbar, was versehentliche Überschneidungen von Selektoren und Manipulationen verhindert.
• Verhaltenskapselung: Logik und Ereignis-Handler können im Shadow DOM isoliert werden.

Beispiel für die Erstellung eines Shadow DOM:

// Erstellen eines neuen DIV-Elements
const hostElement = document.createElement('div');
// Shadow DOM an das Element anhängen
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Inhalt zum Shadow DOM hinzufügen
shadowRoot.innerHTML = `
  <style>
    /* Stil nur innerhalb dieses Shadow DOMs */
    p {
      color: blue;
    }
  </style>
  <p>Dies ist ein Text innerhalb des Shadow DOM</p>
`;

// Host-Element zum Hauptdokument hinzufügen
document.body.appendChild(hostElement);

Anwendungen:

• Wiederverwendbare Web-Komponenten erstellen.
• Stilisolierung externer Bibliotheken.
• Schutz interner Komponenten-Details vor externen Eingriffen.

Eigenschaften bei der Arbeit mit Stilen:

• Externe Stile beeinflussen standardmäßig nicht das Shadow DOM.
• :host Pseudo-Klasse kann verwendet werden, um den Shadow Host innerhalb des Shadow DOM zu stylen.
• :host-context() kann verwendet werden, um basierend auf dem Kontext des Shadow Host zu stylen.
• ::slotted() Pseudo-Element kann verwendet werden, um Elemente zu stylen, die in Slots (<slot>) platziert sind.

<my-component>
  <!-- Dieses Element wird in den Slot innerhalb des Shadow DOM "gesendet" -->
  <span>Slot-Inhalt</span>
</my-component>

// Innerhalb des Shadow DOM des my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Stil für das Element, das in den Slot mit dem Namen "my-slot" eingefügt wurde */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Hauptinhalt des Komponenten</div>
  <slot></slot> <!-- Hier wird der Slot-Inhalt angezeigt -->
`;

Shadow DOM ist Teil der Web Components-Spezifikation.