Shadow DOM is a part of Web Components that encapsulates a component’s HTML structure, styles, and behavior, isolating it from the main DOM. It prevents style leakage and makes reusable, self-contained components.
Example:
const shadow = document.querySelector('#my-element').attachShadow({ mode: 'open' });
shadow.innerHTML = `<p>Shadow DOM content</p>`;