Das Shadow DOM ist ein abgeschotteter Teilbaum, in den weder fremdes CSS noch fremde Selektoren hineinreichen.
- Shadow DOM
Ein an ein Element gehängter Teilbaum, dessen Inhalt und Stile vom übrigen Dokument getrennt sind.
Beispiel: „Ein Shadow DOM hält fremdes CSS draußen und eigenes drinnen.“
Die Abschottung
Selektoren von außen greifen nicht hinein, Stile von innen nicht hinaus. Für Bausteine, die in fremde Seiten eingebettet werden, ist das der entscheidende Vorteil: Ein Widget sieht überall gleich aus, egal welches Stylesheet die Gastseite mitbringt.
Was es erschwert
Dieselbe Abschottung macht das Gestalten von außen schwer. Vorgesehen sind dafür eigene Teile, die der Baustein freigibt, und CSS-Variablen, die hineinreichen. Wer ein fremdes Widget anpassen will, das nichts davon anbietet, steht vor einer Wand.