DOM - Shadow DOM (Scoped DOM)


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

  • written by the DOM engine (generally the Browser)
  • and not by the user.

Note: the light DOM represents all DOM custom element

The Shadow DOM provides a way:

  • for an custom element to own, render, and style a chunk of DOM that's separate from the rest of the page. This is a scope functionality

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


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 custom 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

Discover More
CSS - Cascading (style rules priority scheme)

CSS CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and...
HTML - Custom Tag / Element

A [[|frontmatter]] description shown on the Search Engine Result Pages
HTML - Template Element (Scripted HTML Fragment)

The template element is an HTML element that supports templating. It creates: fragments that can be cloned and/or inserted in the document via script (ie javascript). that can contain placeholder...
HTML Slot - A step by step on how to create a Template Placeholder

Slots allows to define placeholders in an HTML template TemplateShadow DOMcustom elementweb components Status Description Slotable The element that should be inserted in a slot Sloted The element...
How is the DOM document build from an HTML document ?

This page is about the construction of the DOM document from a HTML document (ie the XML language is xhtml) HTMLAPIHTML The HTML dom document is created: * by an xml library * or by the browser...
Url Inspection Google Search Screenshot
Web Search - Googlebot

googlebot is the crawler bot of Google that search and feed the index of the Google search engine When Googlebot renders a page, it flattens: the shadow DOM and light DOM content. Googlebot...
What is a Web Component?

A Web Component is HTML Custom Element that is optionally: created in Shadow DOM (to scope the DOM) using a HTML Templates This is a technology that permits to package up styling and functionality...

Share this page:
Follow us:
Task Runner