CSS Scoping

Das CSS Scoping-Modul definiert die Mechanismen zur CSS-Eingrenzung und -Kapselung und konzentriert sich auf den Shadow DOM Eingrenzungs-Mechanismus.

CSS-Stile sind entweder global oder auf einen shadow tree beschränkt. Global eingrenzte Stile gelten für alle Elemente im Knotenbaum, die dem Selektor entsprechen, einschließlich benutzerdefinierter Elemente in diesem Baum, jedoch nicht für die Shadow Trees, die jedes benutzerdefinierte Element zusammensetzen. Selektoren und ihre zugehörigen Stildefinitionen bluten nicht zwischen den Eingrenzungen.

Innerhalb des CSS eines Shadow Trees wählen Selektoren keine Elemente außerhalb des Baums aus, weder im globalen Bereich noch in anderen Shadow Trees. Jedes benutzerdefinierte Element hat seinen eigenen Shadow Tree, der alle Komponenten enthält, die das benutzerdefinierte Element ausmachen (aber nicht das benutzerdefinierte Element oder den "Host" selbst).

Manchmal ist es nützlich, einen Host aus dem Kontext des Shadow Trees heraus zu gestalten. Das CSS Scoping-Modul macht dies möglich, indem es Selektoren definiert, die:

• Es einem Shadow Tree ermöglichen, seinen Host zu gestalten.
• Externem CSS ermöglichen, Elemente innerhalb eines Shadow DOM zu gestalten (aber nur, wenn das zugehörige benutzerdefinierte Element so eingerichtet ist, dass es externe Stile akzeptiert).