Working With Shadow DOM — Smashing Magazine

Each element can only have one shadow root. Some elements, including and , already have a built-in shadow root that is not accessible through scripting. You can inspect them with your Developer Tools by enabling the Show User Agent Shadow DOM setting, which is “off” by default.

Table of Contents

Toggle

Creating A Shadow Root

Before leveraging the benefits of Shadow DOM, you first need to establish a shadow root on an element. This can be instantiated imperatively or declaratively.

Imperative Instantiation

To create a shadow root using JavaScript, use attachShadow( 'default',
assignedNodes: slot.assignedNodes()
) on an element. The mode can be open (allowing access via element.shadowRoot) or closed (hiding the shadow root from outside scripts).

const host = document.createElement('div');
const shadow = host.attachShadow(
          changedSlot: slot.name );
shadow.innerHTML = '



Hello from the Shadow DOM!






';
document.body.appendChild(host);

In this example, we’ve established an open shadow root. This means that the element’s content is accessible from the outside, and we can query it like any other DOM node:

host.shadowRoot.querySelector('p'); // selects the paragraph element

If we want to prevent external scripts from accessing our internal structure entirely, we can set the mode to closed instead. This causes the element’s shadowRoot property to return null. We can still access it from our shadow reference in the scope where we created it.

shadow.querySelector('p');

This is a crucial security feature. With a closed shadow root, we can be confident that malicious actors cannot extract private user data from our components. For example, consider a widget that shows banking information. Perhaps it contains the user’s account number. With an open shadow root, any script on the page can drill into our component and parse its contents. In closed mode, only the user can perform this kind of action with manual copy-pasting or by inspecting the element.

I suggest a closed-first approach when working with Shadow DOM. Make a habit of using closed mode unless you are debugging, or only when absolutely necessary to get around a real-world limitation that cannot be avoided. If you follow this approach, you will find that the instances where open mode is actually required are few and far between.

Declarative Instantiation

We don’t have to use JavaScript to take advantage of Shadow DOM. Registering a shadow root can be done declaratively. Nesting a