DOM - Shadow DOM (Scoped DOM)


Shadow DOM provides a way for an element to own, render, and style a chunk of DOM that's separate from the rest of the page. It's not in the global DOM. This is a scope functionality

An iframe offers also scope functionalities but the shadow dom offers more feature.


When the scope is global:

  • new HTML id/class may conflict with an existing name
  • CSS styling rule becomes then a huge issue (The !important rule becomes the rule), style selectors grow out of control, and performance can suffer.


custom HTML fancy-tabs creating tabs in a shadow dom (Adapted from source) - Hover on the result and click the try the code button to see the code.




CSS selectors (In stylesheets or inline ) used inside shadow DOM apply only locally. Outer CSS selectors does not apply by default into a shadow dom.

<link rel="stylesheet" href="styles.css">
    #panels {
      box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
      background: white;
    #tabs {
      display: inline-flex;

Styling the shadow element

  • Shadow DOM components can style themselves too, by using the :host selector.
:host {
  display: block; /* by default, custom elements are display: inline */
  contain: content; /* CSS containment FTW. */

Outer Styling

Example with the following html

<body class="darktheme">

The below :host-context(.darktheme) CSS selector will style <fancy-tabs> because it's a descendant of the .darktheme class.

:host-context(.darktheme) {
  color: white;
  background: black;


hooks are CSS custom properties

Documentation / Reference

Powered by ComboStrap