What is Shadow DOM, and why is it important?

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>`;