JavaScript by Example

Attaching a shadow DOM

A shadow DOM provides encapsulation between DOM and CSS. A shadow DOM can be attached to any element and the element to which the shadow DOM is attached is called the shadow root. A shadow DOM is considered separate from the rest of the DOM tree; hence, the styles from outside the shadow root will not affect the shadow DOM and vice versa.

To attach a shadow DOM to an element, we simply need to use the attachShadow() method on that element. Take a look at the following example:

const $shadowDom = $element.attachShadow({mode: 'open'});$shadowDom.innerHTML = `<h2>A shadow Element</h2>`;

Here, firstly, I attached a shadow DOM named $shadowDom to $element. After this, I added some HTML to $shadowDom. Note that I used the ...