DOM - Shadow DOM (Scoped DOM)

About

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.

Why

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.

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.

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

  • Shadow DOM custom components can style themselves too, by using the :host selector.
<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





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 [[https://combostrap.com/frontmatter|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...
Domtree
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