A quick introduction to Javascript shadow DOM

Introduction

JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own DOM trees and styles, which can be easily integrated into the main document without affecting the rest of the page.

One of the main benefits of using shadow DOM is that it helps to prevent styling conflicts between different elements on the page. With shadow DOM, each custom element has its own encapsulated styles, which means that styles defined for one element will not leak or conflict with any other elements on the page. This helps to ensure that each element looks and behaves as intended, without being affected by the styles of other elements.

Example

To illustrate how shadow DOM works, let’s consider the following example.

Suppose we want to create a custom element called <my-button> that looks and behaves like a button. With shadow DOM, we can define the styles and behavior of our custom element in isolation, without worrying about how it will affect the rest of the page.

Here is how we might define <my-button> using shadow DOM:

class MyButton extends HTMLElement {
  constructor() {
    super();

    // Create a shadow root
    const shadowRoot = this.attachShadow({mode: 'open'});

    // Create some HTML elements
    const button = document.createElement('button');
    const text = document.createTextNode('Click me!');

    // Add the text to the button
    button.appendChild(text);

    // Add some styles to the button
    button.style.backgroundColor = 'blue';
    button.style.color = 'white';

    // Add the button to the shadow root
    shadowRoot.appendChild(button);
  }
}

// Define the custom element
customElements.define('my-button', MyButton);

In the code above, we defined a new class called MyButton that extends the HTMLElement class. In the constructor, we created a shadow root for our custom element and added some HTML elements to it (Text and Button elements). We also defined some styles for our button, which will be applied only to the <my-button> element and will not affect any other elements on the page.

Once we have defined our custom element, we can use it in our HTML document like any other HTML element:

<my-button></my-button>

When the page is loaded, the <my-button> element will be rendered with the styles and behavior we defined in our custom element. And because the styles are encapsulated within the shadow root, they will not affect any other elements on the page.

In conclusion, shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to define custom elements with their own styles and behavior, without worrying about how they will affect the rest of the page. By using shadow DOM, developers can build more modular and maintainable web applications.

---

Source code.

Photo from Unsplash