Shadow DOM | Web Components | Amit Padhiyar (Saatody)
Shadow DOM is second most useful feature for web components after custom elements. It is useful for markup structure, style, and behavior hidden and separate from other code on the page. In short, It is known as encapsulation. Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (75 and onwards) supports it too; the old Edge didn't. The Shadow DOM is not new thing for browsers.
Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree. This shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.
 |
| Shadow DOM |
- Shadow host: The regular DOM node that the shadow DOM is attached to.
- 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.
First we create simple custom element.
Create Custom Element
As you know, In previous article, I fully describe about Custom Elements.
# Program
<!DOCTYPE html>
<html>
<head></head>
<body>
<my-text></my-text>
<script>
class MyText extends HTMLElement{
constructor(){
super();
var h2 = document.createElement("h2");
h2.textContent = "Hello World!";
this.appendChild(h2);
}
}
window.customElements.define("my-text", MyText, null);
</script>
</body>
</html>
# Output
<my-text>
<h2>Hello World!</h2>
</my-text>
Attach A Shadow Root To Element
You can attach shadow root to any element using Element.attachShadow() method. There is two mode options to use this function. The options are {mode: 'open'} and {mode: 'closed'}.
Open: Open means that you can access the shadow DOM using JavaScript (Element.shadowRoot) written in the main page context.
Closed: You won't be able to access the shadow DOM from the outside. If you try to open Shadow DOM using Element.shadowRoot, Then it will return null.
Let me describe in detail about modes of attachShadow() method.
Example Of attachShadow() Method
# Program
<!DOCTYPE html>
<html>
<head></head>
<body>
<my-text></my-text>
<script>
class MyText extends HTMLElement{
constructor(){
super();
var h2 = document.createElement("h2");
h2.textContent = "Hello World!";
var shadow = this.attachShadow({mode: 'open'});
shadow.appendChild(h2);
}
}
window.customElements.define("my-text", MyText, null);
</script>
</body>
</html>
# Output
<my-text>
#shadow-root (open)
<h2>Hello World!</h2>
</my-text>
Access Shadow Root Using JavaScript
# Program
<script>
var element = document.getElementsByTagName("my-text")[0];
var root = element.shadowRoot;
console.log("root: " + root);
</script>
# Output {mode:open}
root: [object ShadowRoot]
# Output {mode:closed}
root: null
Comments
Post a Comment