Learcise

Posted on Sep 12

What is Shadow DOM and How It’s Used in Chrome Extensions

#extensions #shadowdom #webdev #javascript

Introduction

If you’ve done any web development, you’ve probably come across the term “Shadow DOM.”

Shadow DOM is one of the core technologies behind Web Components. It provides a mechanism to encapsulate DOM structure and styles, isolating them from the rest of the page.

In this article, we’ll go over the basics of Shadow DOM and how it can be effectively used in Chrome extensions.

What is Shadow DOM?

Basic Mechanism

Shadow DOM allows you to attach a shadow tree to a regular DOM element. This shadow tree contains its own independent DOM structure and style scope.

Shadow host: The element that owns the Shadow DOM
Shadow root: The root of the shadow tree
Shadow tree: The DOM tree inside the shadow root
Shadow boundary: The boundary between the light DOM (normal DOM) and the shadow tree

In a normal DOM, CSS and JavaScript apply globally, which makes it difficult to prevent components from interfering with one another. By introducing Shadow DOM, we gain the following advantages:

Hide internal structure from the outside
Protect against external CSS overriding internal styles
Prevent internal styles or structure from leaking outside

Styles and Events

CSS defined inside a Shadow DOM is scoped locally and won’t be affected by external styles.
By default, events do not cross the shadow boundary. If you want them to propagate outside, you need to set composed: true.

Chrome Extensions and Shadow DOM

In Chrome extensions, content scripts often inject DOM elements or UI directly into web pages. For example, you might want to place a custom button at the bottom-right corner of the page.

However, this approach leads to common issues:

Page CSS breaks the extension’s UI
Conflicts with existing class names or IDs defined in the extension
Interference between page scripts/events and the extension’s UI

Shadow DOM is a powerful solution to these problems.

Benefits of Using Shadow DOM in Chrome Extensions

Prevent CSS Pollution

The page’s styles won’t affect the extension’s UI, and vice versa.
Avoid DOM Conflicts

Even if the same class names or IDs are used, they won’t collide.
Improve UI Stability

Frameworks like React, Vue, or Chakra UI can run inside Shadow DOM without being disrupted by page-specific CSS.

Technical Implementation Points

Let’s walk through the basic flow of using Shadow DOM in a Chrome extension.

1. Creating a Shadow Root

const host = document.createElement('div');
host.id = 'my-extension-shadow-host';
document.body.appendChild(host);

const shadowRoot = host.attachShadow({ mode: 'open' });

Using open mode makes debugging easier during development.
Using closed mode increases isolation but also restricts access.

2. Applying Styles

const styleEl = document.createElement('style');
styleEl.textContent = `
  :host {
    all: initial;
    font-family: Arial, sans-serif;
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
  }
  button {
    padding: 8px 12px;
    font-size: 14px;
  }
`;
shadowRoot.appendChild(styleEl);

all: initial; ensures the extension’s UI won’t be affected by the page’s reset CSS.
If you’re using a UI library, import its styles into the shadow root as needed.

3. Adding UI Elements

const button = document.createElement('button');
button.textContent = 'My Button';
shadowRoot.appendChild(button);

Conclusion

Shadow DOM provides a mechanism to encapsulate DOM structure and styles
In Chrome extensions, it’s very effective at protecting UI from interference by the page
When implementing, pay attention to attachShadow, all: initial, and event propagation handling

By understanding Shadow DOM, you can make your Chrome extension UI much more stable and maintainable. If you’re developing extensions, it’s definitely worth adopting.

DEV Community