shadow DOM styles

Previousshadow root vs. host NextUse CSS Variables

Last updated 8 months ago

Was this helpful?

<body class="darktheme">
  <fancy-tabs>
    ...
  </fancy-tabs>
</body>

/*
  ⭐️ :host-context(<selector>) ⭐️
     -------------------------
     select host if it or any of its ancestors matches <selector>.
*/
:host-context(.darktheme) {
  color: white;
  background: black;
}

/*
  ⭐️ won't select text node placed into slot (only elements)
*/

/* selects any element placed inside a slot */
::slotted(*) {
  font-weight: bold;
}

/* selects any <span> placed inside a slot */
::slotted(span) {
  font-weight: bold;
}

/* ⭐️ select host element (from inside shadow DOM) */
:host {

  /* ⭐️ by default, custom elements are `display: inline` */
  display: block;
  
  /* CSS containment */ 
  contain: content; 
}

:host {
  opacity: 0.4;
  will-change: opacity;
  transition: opacity 300ms ease-in-out;
}

/*
  ⭐️ :host(<selector>) ⭐️
     -----------------
     target the host if it matches a <selector>. 
*/
:host(:hover) {
  opacity: 1;
}

:host([disabled]) { /* style when host has disabled attribute. */
  background: grey;
  pointer-events: none;
  opacity: 0.4;
}

:host(.blue) {
  color: blue; /* color host when it has class="blue" */
}

:host(.pink) > #tabs {
  color: pink; /* color internal #tabs node when host has class="pink". */
}