Table of Contents

DOM - Shadow DOM (Scoped DOM)

About

The Shadow DOM is the part of the DOM that is:

Note: the light DOM represents all DOM custom element

The Shadow DOM provides a way:

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

Why

When the scope is global:

Example

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.

Rendered by WebCode

Styling

Ref

Scoped

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">
<style>
    #panels {
      box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
      background: white;
      ...
    }
    #tabs {
      display: inline-flex;
      ...
    }
</style>

Styling the shadow element

<style>
:host {
  display: block; /* by default, custom elements are display: inline */
  contain: content; /* CSS containment FTW. */
}
</style>

Outer Styling

Example with the following html 

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

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;
}

Hook

hooks are CSS custom properties

Documentation / Reference