Shadow DOM Styling

Shadow DOM Styling in JavaScript

The Shadow DOM is a web standard that allows developers to encapsulate the internal structure and style of an element, providing a way to isolate the styles and scripts inside an element from the rest of the document. This ensures that styles applied outside the Shadow DOM do not affect elements inside it and vice versa.

Key Concepts

Shadow DOM: A way to encapsulate a part of the DOM structure, isolating it from the global document.
Shadow Root: The root element of the shadow DOM. It is attached to a host element and contains the shadow DOM's content and styling.
Encapsulation: Styles and scripts inside the Shadow DOM are scoped to that Shadow DOM, meaning they don't leak out, and styles from the main document don’t affect it.

1️⃣ Creating a Shadow DOM

Before we discuss styling, let's first understand how to create a shadow DOM on an element.

const host = document.querySelector('#shadow-host');  // Target an element
const shadowRoot = host.attachShadow({ mode: 'open' });  // Attach Shadow DOM
shadowRoot.innerHTML = `<p>This is inside the Shadow DOM!</p>`;  // Add content

In the above example:

attachShadow({ mode: 'open' }) creates a shadow root for the element with the #shadow-host ID. The mode can be either 'open' or 'closed'.
open allows you to access the shadow DOM via JavaScript, while closed hides the shadow DOM from JavaScript (you cannot access it directly).
The content inside the shadow DOM is encapsulated.

2️⃣ Styling the Shadow DOM

The styling inside the Shadow DOM can be handled in two main ways:

Using Inline Styles within the Shadow DOM
Using External Stylesheets

2.1 Inline Styles inside the Shadow DOM

You can directly define styles inside the shadow DOM using <style> tags, just like you would in the main document.

const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
      font-size: 20px;
    }
  </style>
  <p>This is styled inside the Shadow DOM!</p>
`;

In this example:

A <style> tag is included inside the shadow root, and styles are scoped to the shadow DOM.
The styles inside the shadow DOM only apply to the elements inside the shadow DOM (the <p> element in this case), ensuring that no external styles can affect it.

2.2 Using External Stylesheets for the Shadow DOM

You can also link an external stylesheet to the shadow DOM using the <link> tag.

const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <link rel="stylesheet" href="shadow-styles.css">
  <p>This is styled using an external stylesheet!</p>
`;

In this example:

The <link> tag is used to link to an external CSS file (shadow-styles.css), and the styles will only apply inside the shadow DOM.

2.3 Styling Elements Inside the Shadow DOM

You can apply styles directly to the shadow DOM's child elements just as you would in a regular document. The styles are scoped to the shadow DOM.

const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    h2 {
      color: green;
    }
  </style>
  <h2>This heading is green inside the Shadow DOM</h2>
`;

Here:

The <h2> element will appear green only inside the shadow DOM and not on the main page.

3️⃣ Styling Outside the Shadow DOM (Global Styles)

Global styles cannot affect the shadow DOM directly. However, if you want to apply styles globally while still respecting the Shadow DOM's encapsulation, you can use the ::part pseudo-element (for elements with the part attribute) or the ::slotted pseudo-element for slots.

3.1 The `::part` Pseudo-element

The ::part pseudo-element allows external styles to affect the parts of an element that are exposed via the part attribute.

For example, if you define a part in the shadow DOM:

const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <div part="content">This is content inside the Shadow DOM</div>
`;

You can now style the content part from outside the shadow DOM:

host::part(content) {
  background-color: yellow;
}

In this case:

The part named content in the shadow DOM will have a yellow background.

3.2 The `::slotted` Pseudo-element

The ::slotted pseudo-element allows styling elements that are distributed into the shadow DOM via slots.

const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <slot name="user-content"></slot>
`;

Then, in the parent document, you can provide content for the slot:

<my-element>
  <div slot="user-content">This is user content</div>
</my-element>

You can style the slotted content with the ::slotted pseudo-element:

my-element::slotted(div) {
  color: red;
}

In this case:

The <div> inside the <my-element> that is slotted into the shadow DOM will appear red.

4️⃣ Shadow DOM Styling Limitations

No Style Inheritance: Styles in the main document cannot directly affect elements in the shadow DOM. The Shadow DOM has its own encapsulated styling.
Global Styles Are Not Scoped: Any CSS defined in the main document won't apply to shadow DOM elements unless you explicitly expose parts via ::part or ::slotted.
Limitations of ::part and ::slotted: These mechanisms only allow limited interactions with shadow DOM styling. They don't offer full access to style all elements within the shadow DOM, and they rely on the part attribute and slotting mechanisms.

5️⃣ Conclusion

Shadow DOM is a powerful feature in web development that helps create reusable components with encapsulated styling and behavior.
You can style elements within a shadow DOM using inline styles or external stylesheets, ensuring that the styles are scoped and won't conflict with the rest of the page.
While the Shadow DOM provides encapsulation, you can still expose certain parts of the shadow DOM for styling via ::part or style slotted content via ::slotted.

Let me know if you'd like to explore more about Shadow DOM or its use cases! 😊

Souy Soeng

Shadow DOM Styling