Show Menu
Cheatography

Shadow DOM CSS Cheat Sheet Cheat Sheet (DRAFT) by

Shadow DOM CSS scoping and encapsulation.

This is a draft cheat sheet. It is a work in progress and is not finished yet.

:host

The :host pseudo­-class matches the shadow tree’s host element. Given the following code, the selector :host matches the <x-­foo> element. Compound selectors are also supported, such as :host(.foo) matches the <x-­foo> element as well.

<x-foo class=­"­foo­">
 ­ ­<"shadow tree">
 ­ ­ ­ ­<st­yle>
 ­ ­ ­ ­:host { /* matches x-foo */ }
 ­ ­ ­ ­</s­tyl­e>
 ­ ­ ­ ­<div class=­"­foo­"­>...</­div>
 ­ ­</>
</x­-fo­o>
Note that using the .foo selector inside the shadow tree will only match the div.foo element and not the host x-foo.foo element.

::shadow

The ::shadow pseudo­-el­ement matches the shadow tree’s top-level elements. See the following code for examples.

<st­yle>
x-foo:­:shadow {
 ­ /* matches div and span#root */
}
x-foo:­:shadow > span {
 ­ /* matches only span#root */
}
x-foo:­:shadow span {
 ­ /* matches all spans */
}
</s­tyl­e>
<x-foo class=­"­foo­">
 ­ ­<"shadow tree">
 ­ ­ ­ ­<di­v>
 ­ ­ ­ ­ ­ ­ ­ ­<span id="­chi­ld">...<­/s­pan>
 ­ ­ ­ ­ ­ ­</d­iv>
 ­ ­ ­ ­<span id="­roo­t">...<­/sp­an>
 ­ ­</>
</x­-fo­o>
 

:host-­con­text()

The :host-­con­text() pseudo­-class matches a parent element outside the shadow tree. Given the following code, the selector :host-­con­text() matches the <di­v> element with the green-­theme class. This can be used to cordinate styles for a group of web compon­ents, for exampe when theming.

<div class=­"­gre­en-­the­me">
 ­ ­<x-­foo>
 ­ ­<"shadow tree">
 ­ ­ ­ ­<st­yle>
 ­ ­ ­ ­:ho­st-­con­tex­t(.g­re­en-­theme) {
 ­ ­ ­ ­ ­ ­color: #060;
 ­ ­ ­ }
 ­ ­ ­ ­</s­tyl­e>
 ­ ­ ­ ­<div class=­"­foo­"­>...</­div>
 ­ ­</>
 ­ ­</x­-fo­o>
</d­iv>