The
shadow DOM is a subtree that branches off the DOM (light DOM). It hides away the complexity of components from the rest of the page. It has actually been around for quite a while. In fact, all of these elements utilize the shadow DOM to hide their complex markup and styling away.
<input type="range" />
<video controls width="250"></video>
<input type="date" />
Because of the new concept of shadow DOM, we need to avoid the confusion between the DOM you knew before and this new shadow DOM. So you are going to see the term
light DOM used to describe the DOM you have been familiar with and working with all these years. But before we dive into the shadow DOM, here's one more term, the logical DOM. So the
logical DOM is an umbrella term, so the light DOM and shadow DOM together are a part of logical DOM.
To understand shadow DOM, let’s look at the HTML5 <video> element, which is a custom element with a shadow DOM. Because
Show user agent shadow DOM is enabled in Chrome Developer Tools, you see the #shadow-root node and its child elements, which make up the shadow DOM. If you disable this option, you would see only the <video> tag, and none of its children.
There are a variety of terms that we need to understand when working with the shadow DOM.
- Shadow Host: It is the element in the light DOM that is hosting the shadow DOM. So the shadow host, in this case, is the video tag, and it hosts the shadow root.
- Shadow Root: It is labelled in Chrome dev tools with #shadow-root, and is the root node of the shadow tree, encapsulating a DOM subtree. All this markup within the shadow root is shadow DOM. You can also see a nested shadow tree here, which is also known as a DOM subtree. So one DOM subtree can end up hosting another DOM subtree
- Shadow Boundary: It encapsulates styling rules that are defined within a given piece of shadow DOM. So in other words, a CSS selector that's applied in the shadow DOM doesn't apply to other elements outside of shadow DOM and vice versa. This is because styles in the shadow DOM do not cross over the shadow boundary. The shadow boundary exists at the shadow root. To clarify, the shadow boundary is a concept and is merely a term used to describe the boundary between the light DOM and shadow DOM.
Creating shadow DOM is a simple 3-step process.
- Select shadow host, which is an element in the light DOM that will wrap the shadow root.
- Create a shadow root
- Add elements to the shadow DOM using the same methods that you use to append elements to the light DOM: innerHTML and appendChild
In the code below, the style is only going to impact the light DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>Hello World from the light DOM</h1>
<div id="host"></div>
<template>
<h1>Hello World from the shadow DOM</h1>
</template>
<script>
var template = document.querySelector('template');
var host = document.getElementById('host');
var root = host.attachShadow({mode: 'open'});
root.appendChild(document.importNode(template.content, true));
// Only going to get a reference to the light DOM
console.log(document.querySelectorAll('h1'));
// Only going to get a reference to the shadow DOM. For multiple pieces of shadow DOM in the page,
// you need to get the shadow root that is appropriate for the element that you are trying to target
console.log(root.querySelectorAll('h1'));
</script>
</body>
</html>
Lightning Web Components
The shadow DOM for a Lightning web component is created automatically. The component author doesn’t have to implement it (no need to use the attachShadow() or appendChild() methods). Also since Lightning web components don’t use the native shadow DOM yet, you can’t view their shadow DOM in Chrome Developer Tools. Even if you enable Show user agent shadow DOM, you don’t see the shadow DOM.
Resources:
https://medium.com/front-end-weekly/the-rise-of-shadow-dom-84aa1f731e82
