What do you know about Shadow DOM?

Published in

tarmac

4 min readNov 19, 2022

If you are web developer, you need to know about this feature. One common problem of web development is encapsulation.

Some days ago. I was having an issue using chakra-ui (beautiful library) building a third-party script for websites.

Brutal error! chakra-ui was created as a design system not as a component library. So, if you have styles on the client side with !important those override our script styles, nightmares!

Iframe was not an option, no bueno!
chakra-ui library works with emotion, the only solution was to write all the code with !important, also no bueno!

SHADOW DOM

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements in the rendering of a document, but not in the main document

Shadow DOM is designed as a tool for building component-based apps. Therefore, it brings solutions for common problems in web development:

Isolated DOM: A component’s DOM is self-contained (e.g. document.querySelector() won't return nodes in the component's shadow DOM).
Scoped CSS: CSS defined inside shadow DOM is scoped to it. Style rules don’t leak out and page styles don’t bleed in.
Composition: Design a declarative, markup-based API for your component.
Simplifies CSS — Scoped DOM means you can use simple CSS selectors, more generic id/class names, and not worry about naming conflicts.
Productivity — Think of apps in chunks of DOM rather than one large (global) page.

DOM… in the shadows

Shadow DOM is just normal DOM with two differences:

How it’s created/used
How it behaves in relation to the rest of the page. Normally, you create DOM nodes and append them as children of another element. With shadow DOM, you create a scoped DOM tree that’s attached to the element, but separate from its actual children. This scoped subtree is called a shadow tree. The element it’s attached to is its shadow host. Anything you add in the shadows becomes local to the hosting element, including <style>. This is how shadow DOM achieves CSS style scoping.

SHADOW DOM STYLE ENCAPSULATION

Code example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      p {
        color: blue !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
      }
    </style>
    <template><p>I am the default color, then green.</p></template>
  </head>
  <body>
    <p>I am blue.</p>
    <div id="shadow-dom"></div>
    <script type="text/javascript">
      const existingElement = document.getElementById("shadow-dom");
      const shadow = existingElement.attachShadow({ mode: "open" });
      const message = document.createElement("p");
      message.setAttribute("class", "text");
      message.textContent = "Hello World!";

      const styles = document.createElement("style");
      styles.textContent = ".text { color: red };";

      shadow.appendChild(styles);
      shadow.appendChild(message);
    </script>
  </body>
</html>

Browser Compatibility

Shadow DOM (V1) on IE is fully supported on None of the versions, partially supported on None of the versions, and not supported on 5.5–11 IE versions.
Shadow DOM (V1) on Edge is fully supported on 79–103, partially supported on None of the versions, and not supported on 12–18 Edge versions.
Shadow DOM (V1) on Firefox is fully supported on 63–104, partially supported on None of the versions, and not supported on 2–62 Firefox versions.
Shadow DOM (V1) on Chrome is fully supported on 53–106, partially supported on None of the versions, and not supported on 4–52 Chrome versions.
Shadow DOM (V1) on Safari is fully supported on 10–16, partially supported on None of the versions, and not supported on 3.2–9 Safari versions.
Shadow DOM (V1) on Opera is fully supported on 40–87, partially supported on None of the versions, and not supported on 9.5–39 Opera versions.
Shadow DOM (V1) on Safari on iOS is fully supported on 11–16, partially supported on 10–10.3, and not supported on 3.2–9 Safari on iOS versions.
Shadow DOM (V1) on Android Browser is fully supported on 97–103, partially supported on None of the versions, and not supported on 2.3–4 Android Browser versions.
Shadow DOM (V1) on Opera Mobile is fully supported on 64–64, partially supported on None of the versions, and not supported on 10–12 Opera Mobile versions.
Shadow DOM (V1) on Chrome for Android is fully supported on 97–103, partially supported on None of the versions, and not supported on below 97 Chrome for Android versions.
Shadow DOM (V1) on Firefox for Android is fully supported on 95–101, partially supported on None of the versions, and not supported on below 95 Firefox for Android versions.
Shadow DOM (V1) on Samsung Internet is fully supported on 6.2–17, partially supported on 5–5, and not supported on 4–4 Samsung Internet versions.

I hope that you enjoy this article! Remember, the Force will be with you always.

What do you know about Shadow DOM?

SHADOW DOM

DOM… in the shadows

SHADOW DOM STYLE ENCAPSULATION

Browser Compatibility

Written by Ivan Scoles