What is the Shadow DOM?

The Shadow DOM is a web component feature that encapsulates a section of the DOM —

meaning styles and markup inside it don’t leak out or get affected by the rest of the page.

Example:

<custom-card></custom-card>

<script>

class CustomCard extends HTMLElement {

constructor() {

super();

const shadow = this.attachShadow({ mode: 'open' });

shadow.innerHTML = `<style>p { color: blue; }</style><p>Hello

Shadow!</p>`;

customElements.define('custom-card', CustomCard);

</script>

Key Takeaway:

Shadow DOM = style and structure isolation for reusable, predictable components.