Shadow DOM

ByPastek Editor Blogs

Introduction:

As the web grows, developers are constantly looking for new ways to package and organize their code to avoid conflicts and maintain integrity. Shadow DOM (Document Model) is a powerful tool that allows developers to create containers with their own styles and implementations.

Shadow DOM:

Shadow DOM is a web standard that supports the creation of DOM-independent subtrees on the web. It encapsulates the internal structure, style, and functionality of objects, preventing them from interfering with other documents. This separation supports modularity, reusability and avoids conflicts between components.

Example Scenario:

Creating a Custom Button Component:

To demonstrate the power of Shadow DOM, let’s imagine we are developing a custom button component that we want to reuse across our web application. We’ll create a simple button with a shadow DOM that contains a styled button element.

HTML Markup:

Let’s start by defining the HTML structure for our custom button component.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <title>Shadow DOM Example</title>

</head>

<body>

  <my-button>Hello, Shadow DOM!</my-button>

  <script src=”button.js”></script>

</body>

</html>

JavaScript Code:

Next, we’ll create a JavaScript file named button.js, where we define our custom button component using the Shadow DOM API.

class MyButton extends HTMLElement {

  constructor() {

    super();

    const shadow = this.attachShadow({ mode: ‘open’ });

    const button = document.createElement(‘button’);

    button.textContent = this.textContent;

    const style = document.createElement(‘style’);

    style.textContent = `

      button {

        background-color: #007bff;

        color: #fff;

        padding: 8px 16px;

        border: none;

        border-radius: 4px;

        font-size: 14px;

        cursor: pointer;

      }

    `;

    shadow.appendChild(style);

    shadow.appendChild(button);

  }

}

customElements.define(‘my-button’, MyButton);

Explanation:

Let’s break down the JavaScript code step by step:

  • We define a custom class MyButton that extends the HTMLElement class.
  • In the constructor, we call super() to ensure the proper initialization of the base class.
  • We create a shadow root using attachShadow({ mode: ‘open’ }), specifying that  the shadow root can be accessed from JavaScript (open mode).
  • Next, we create a button element and set its text content to the text provided between the opening and closing my-button tags.
  • We create a style element and set its text content to the CSS styles for our button.
  • Finally, we append the style and button elements to the shadow root.

Output:

When we load our HTML file in a browser, the my-button element will be rendered as a custom-styled button with a blue background and white text. The encapsulated shadow DOM ensures that the button’s styles do not interfere with the styles of other elements on the page.

Conclusion:

Shadow DOM provides an elegant solution for creating reusable, encapsulated components in web development by utilizing shadow roots, developers can avoid style clashes and encapsulate the behavior of their components. In this blog post, we explored a simple example of creating a custom button component using Shadow DOM, demonstrating its isolation capabilities and showcasing the desired output.