:host pseudo-class ​

Templates and Slots bring with them a handful of CSS pseudo-classes and pseudo-elements to help with styling.

The :host pseudo-class is a reference to the custom element itself, but you're unable to use the :root pseudo-class in HTML.

:host p {
  background: orange;
}

:host > div {
  background: pink;
}

:host p {
  background: orange;
}

:host > div {
  background: pink;
}

Demo ​

Resources ​

• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
• MDN