🦹 What is Shadow DOM? A simple and complete guide

Posted by

  


When developing modern web applications, you often come across problems related to code maintenance,  component reusability and, above all,  CSS style collisions. The Shadow DOM is one of the solutions offered by the Web Components API to address these problems.

In this article, we will discover what the Shadow DOM is, why it is useful, how to use it and we will see some practical examples.

🔗 Do you like Techelopment? Check out the site for all the details!

✅ What is Shadow DOM?

The Shadow DOM is a technology that allows you to encapsulate a part of the DOM in a “shadow domain” separate from the main DOM of the page (also called "light DOM").

This means that:

  • Styles and scripts defined inside the Shadow DOM do not affect the rest of the page.
  • At the same time, the rest of the page cannot directly affect the Shadow DOM.
In short: Shadow DOM creates a private “mini-page” inside your component.

 

🧱 Why use Shadow DOM?

Here are some of the main reasons to use it:

  • Style Isolation: CSS styles in your component will not conflict with the rest of the page or other components.
  • Markup Encapsulation: The content of your component is hidden from the outside, making your code more modular and secure.
  • Reusable Components: You can create Web Components that behave consistently wherever they are used.

🛠️ How do I use the Shadow DOM?

Let's see how to create a Shadow DOM in a custom Web Component.

✅ Basic example

In JavaScript:

// Define a new class for the custom element
class MyElement extends HTMLElement { 
    constructor() { 
        super(); 
        const shadow = this.attachShadow({ mode: 'open' }); 

        const wrapper = document.createElement('div'); 
        wrapper.textContent = 'Hello from the shadow DOM!'; 
        wrapper.style.color = 'blue'; 

        shadow.appendChild(wrapper); 
    }
}

customElements.define('my-element', MyElement);

How to use it (in html):

<my-element></my-element>

🧪 open vs closed

ModesWhen creating a Shadow DOM, you can choose between two modes:
  • open: Allows access to the shadow DOM via JavaScript (element.shadowRoot)
  • closed: prevents direct access (useful for more encapsulation)
const shadow = this.attachShadow({ mode: 'closed' });
// shadowRoot won't be accessible from outside

🎨 Styling in the Shadow DOM

CSS can be defined directly in the Shadow DOM to ensure isolation.
const style = document.createElement('style');
style.textContent = ` 
    div { 
        color: red; 
        font-weight: bold; 
    }
`;

shadow.appendChild(style);

🧬 Slot: Connect Shadow DOM to external content

You can use <slot> to allow you to insert dynamic content from outside into your Shadow DOM.

shadow.innerHTML = ` 
    <style> 
        ::slotted(*) { 
            color: green; 
        } 
    </style> 
    <div> 
        <slot></slot> 
    </div>
`;
In HTML:
<my-element> 
    <p>This text will be slotted inside!</p>
</my-element>

🚫 Limitations and Considerations

  • Debugging can be a little trickier because shadow content is not immediately visible in the DOM.
  • Some third-party tools may not “see” the Shadow DOM content correctly.
  • Not all JavaScript frameworks support it natively to the same extent (although support has improved).

📦 Conclusion

The Shadow DOM is a powerful technology for creating modern, modular, and maintainable web components. Thanks to its isolation, it avoids style conflicts and allows for more robust development.

In summary, you should use the Shadow DOM if:

  • You want to create reusable components.
  • You need to isolate styles and markup.
  • You are working with Web Components.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment