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

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

Mock useSearchParams react testing library

Mock useSearchParams react testing library

To mock the useSearchParams hook from react-router-dom, you can use Jest’s mock function to provide a mocked implementation for the hook. For example: Consider we’ve a URL…

Leave a Reply

%d bloggers like this: