Shadow DOM in Javascript
The Shadow DOM is a web standard that allows developers to encapsulate their HTML, CSS, and JavaScript, isolating a section of the DOM (Document Object Model) to reuse without conflicts with the main document. This is particularly useful in developing web components, as it helps prevent styles and scripts from leaking in or out, providing a way to create modular, reusable components.
🔑 Key Features of Shadow DOM:
🎁 Encapsulation: Styles defined inside a shadow root do not affect the outer document and vice versa.
🌲 DOM Tree: A shadow tree is separate from the light DOM (the regular DOM visible to the user).
🎯 Scoped Styles: CSS rules applied inside the shadow DOM are scoped only to that shadow tree.
Get Abbas Roholamin’s stories in your inbox
Join Medium for free to get updates from this writer.
Example of Shadow DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow DOM Example</title>
<style>
/* Styles for the light DOM */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is a title in the light DOM</h1>
<my-element></my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
// Attach a shadow root to the element
const shadow = this.attachShadow({ mode: 'open' });
// Create elements for the shadow DOM
const wrapper = document.createElement('div');
const para = document.createElement('p');
// Assign text
para.textContent = 'This is inside the shadow DOM!';
// Add some styles
const style = document.createElement('style');
style.textContent = `
div {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
p {
color: red;
}
`;
// Attach the created elements to the shadow DOM
wrapper.appendChild(style);
wrapper.appendChild(para);
shadow.appendChild(wrapper);
}
}
// Define the custom element
customElements.define('my-element', MyElement);
</script>
</body>
</html>Explanation of the Example:
Creating a Custom Element (<my-element>): We define a class MyElement that extends HTMLElement. This class sets up the shadow DOM when the element is created.
Attaching the Shadow DOM: The attachShadow method is called with the option { mode: ‘open’ }, meaning that JavaScript can access the shadow DOM outside of it. There’s also a { mode: ‘closed’ } option that restricts access.
Adding Styles and Content: Inside the shadow DOM, we create a div and a p (paragraph) element, and we also define some CSS styles. These styles will only apply to elements within the shadow DOM.
Using the Custom Element: In the light DOM, we use <my-element>, which will display the content defined in the shadow DOM, isolated from any other styles or elements in the document.
Conclusion
This example demonstrates how Shadow DOM allows for encapsulated styling and markup within custom elements. This feature is particularly powerful for creating reusable components in web development without worrying about style conflicts or other global document issues.
