The Rise of Shadow DOM

Akash Pal
Akash Pal
Nov 29, 2018 · 4 min read
Image for post
Image for post
Shadow DOM
  • Shadow tree: The DOM tree inside the shadow DOM.
  • Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
  • Shadow root: The root node of the shadow tree.

Creating shadow DOM — attachShadow

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Result on browser

Types of Shadow DOM Modes — Open vs Closed

var shadowRoot = host.attachShadow({mode: 'open'});
console.log(host.shadowRoot);
Image for post
Image for post
Open Shadow DOM
var shadowRoot = host.attachShadow({mode: 'closed'});
console.log(host.shadowRoot); //null

Creating shadow DOM — Using Template Approach

As the content of the Shadow DOM increases, making use of appendChild/innerHTML is not feasible. So template tags are used to better create Shadow Elements.

<div id="shadowHost">Shadow Root</div>
<template id="demo">
<style>*{ color: blue; }</style>
<div><span class="name">Inside Shadow DOM</span></div>
</template>
<div>
<div class="x">Outer Element</div>
var host = document.querySelector('#shadowHost');
var shadowRoot = host.createShadowRoot();
shadowRoot.appendChild(document.querySelector('#demo').content);
Image for post
Image for post
Image for post
Image for post

Creating Web Components Using Shadow DOM

<my-web-component></my-web-component>
<div class="x">Outer Element</div>
.x{
color:red;
}
class MyWebComponent extends HTMLElement {

constructor() {
super();
this.attachShadow({
mode: "open"
});
}

connectedCallback() {
var div = document.createElement('div');
div.textContent = "Inside Shadow DOM";
div.className = "x";
this.shadowRoot.appendChild(div); }
}
window.customElements.define("my-web-component", MyWebComponent);

Web Components Using Template tag

HTML

<div id="shadowHost">Shadow Root</div>
<template id="demo">
<style>*{ color: blue; }</style>
<div><span class="name">Inside Shadow DOM</span></div>
</template>
<div>
<div class="x">Outer Element</div>
class MyWebComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: "open"
});
}
connectedCallback() {
this.shadowRoot.appendChild(
document.querySelector('#demo').content);
}
}
window.customElements.define("my-web-component", MyWebComponent);
const $myWebComponent = document.querySelector("my-web-component");
$myWebComponent.shadowRoot.querySelector("div").innerText = "Modify inner content";
Image for post
Image for post
const $myWebComponent = document.querySelector("my-web-component");
$myWebComponent.shadowRoot; // null
$myWebComponent._root.querySelector("div").innerText = "Changed";
Image for post
Image for post

Slots in Web Components:

Slots provide flexibility to web components to add custom content within the component.

<my-web-component>
<span slot="innerText">Input Inner Text</span>
</my-web-component>
<template id="demo">
<style>*{ color: blue; }</style>
<div>
<slot name="innerText">Default Inside Shadow DOM</slot>
</div>
</template>
<div class="x">Outer Element</div>
Image for post
Image for post
<my-web-component>
</my-web-component>
<template id="demo">
<style>*{ color: blue; }</style>
<div>
<slot name="innerText">Default Inside Shadow DOM</slot>
</div>
</template>
<div class="x">Outer Element</div>
Image for post
Image for post

Frontend Weekly

It's really hard to keep up with all the front-end…

Akash Pal

Written by

Akash Pal

Reactjs developer

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Akash Pal

Written by

Akash Pal

Reactjs developer

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store