JavaScript Academy · Lektion

Shadow DOM und Kapselung

Isolieren Sie Styles und Markup in Shadow Roots.

Shadow DOM und Kapselung ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist das Shadow DOM

Der Shadow DOM gibt einem Element einen privaten, gekapselten DOM-Baum. Markup und Styles darin sind vom restlichen Teil der Seite isoliert.

CSS von außerhalb dringt nicht ein.
CSS innerhalb des Baums dringt nicht nach außen.
Die interne Struktur ist für normale DOM-Abfragen verborgen.

attachShadow

Sie erstellen einen Shadow-Baum, indem Sie this.attachShadow({ mode: 'open' }) aufrufen. Dieser Aufruf gibt eine Shadow Root zurück, die Sie wie einen normalen Knoten mit Inhalten füllen.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
}
customElements.define('fancy-box', FancyBox);

open- vs. closed-Modus

Die Option mode steuert den Zugriff von außen:

'open' — Die Root ist über element.shadowRoot erreichbar.
'closed' — element.shadowRoot gibt null zurück; nur Ihr Code besitzt die Referenz.

Die meisten Komponenten verwenden 'open', um das Debugging zu erleichtern.

const root = this.attachShadow({ mode: 'open' });
// Later, from outside:
// myEl.shadowRoot  -> the shadow root (open)
// closed mode would give null here

Die Shadow Root befüllen

Setzen Sie shadowRoot.innerHTML, um den gekapselten Inhalt zu erstellen. Dieses Markup ist für document.querySelector unsichtbar.

class FancyBox extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>I live inside the shadow DOM</p>';
  }
}
customElements.define('fancy-box', FancyBox);

Gekapselte Styles

Ein style-Tag innerhalb der Shadow Root wirkt sich nur auf diese Root aus. Derselbe Selektor außerhalb der Komponente bleibt unberührt, und Seitenstyles dringen nicht ein.

root.innerHTML =
  '<style>p { color: rebeccapurple; }</style>' +
  '<p>Only this paragraph is purple.</p>';
// A <p> elsewhere on the page is NOT affected.

Der :host-Selektor

In Shadow-Styles zielt :host auf das benutzerdefinierte Element selbst, also den Host des Shadow-Baums. Verwenden Sie ihn, um den äußeren Bereich der Komponente zu gestalten.

root.innerHTML =
  '<style>' +
  ':host { display: block; border: 1px solid gray; }' +
  ':host(.active) { border-color: green; }' +
  '</style>' +
  '<slot></slot>';

Style-Isolierung in der Praxis

Durch die Kapselung müssen Komponentenersteller und Seitenautoren nicht mehr um Klassennamen konkurrieren. Eine .title-Regel innerhalb einer Komponente wirkt sich niemals auf ein anderes .title aus.

Keine Konflikte mit globalem CSS.
Einfache, allgemeine Selektoren sind wieder sicher.

Abfragen innerhalb der Shadow Root

Um auf interne Knoten zuzugreifen, fragen Sie die Shadow Root ab, nicht das Dokument. Die Shadow Root unterstützt dieselben Abfragemethoden.

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<button>Off</button>';
    this.btn = root.querySelector('button');
  }
}
customElements.define('toggle-button', ToggleButton);

Events überschreiten die Grenze

Viele Events, etwa click, bubblen aus dem Shadow DOM heraus, werden aber umadressiert, sodass Listener außerhalb das Host-Element und nicht den internen Knoten sehen. Dadurch bleibt die Kapselung erhalten.

// Outside listener sees event.target as <toggle-button>,
// not the inner <button>.
document.querySelector('toggle-button')
  .addEventListener('click', e => {
    console.log(e.target.tagName); // TOGGLE-BUTTON
  });

Vererbbare Styles

Einige CSS-Eigenschaften, etwa color und font-family, werden über die Shadow-Grenze hinweg vererbt, weil die Vererbung im zusammengesetzten Baum nach unten verläuft. Sie können das Erscheinungsbild der Seite übernehmen, indem Sie sich auf Vererbung oder CSS-benutzerdefinierte Eigenschaften stützen.

// :host { color: inherit; }
// CSS custom properties also pierce the boundary:
// :host { color: var(--text-color, black); }

Wann Sie den Shadow DOM verwenden sollten

Verwenden Sie den Shadow DOM, wenn Sie für ein wiederverwendbares Widget eine starke Isolierung von Styles und Markup benötigen. Verzichten Sie darauf, wenn die Komponente die globalen Styles der Seite frei erben und an ihnen teilnehmen soll.

Kurzer Test

Testen Sie Ihr Verständnis des Shadow DOM.

Zusammenfassung

Sie haben den Shadow DOM kennengelernt:

attachShadow({ mode }) erstellt einen isolierten Baum.
'open' gibt shadowRoot frei; 'closed' verbirgt es.
Interne style-Tags sind auf den jeweiligen Bereich beschränkt; :host gestaltet das Element selbst.
Abfragen werden gegen die Shadow Root und nicht gegen das Dokument ausgeführt.
Events werden umadressiert, damit die Kapselung erhalten bleibt.

Als Nächstes verwenden wir Markup mit Templates und Slots wieder.

Häufig gestellte Fragen

Ist die Lektion „Shadow DOM und Kapselung“ kostenlos?

Ja — der vollständige Text von „Shadow DOM und Kapselung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Shadow DOM und Kapselung“?

Isolieren Sie Styles und Markup in Shadow Roots. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Shadow DOM und Kapselung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy