Shadow DOM
Shadow DOM — technology для создания изолированного DOM-subtree внутри element. CSS из outer document не пробивается внутрь (исключая inheritable properties), а outside JS querySelector не видит shadow tree. Основа Web Components standard. Использование: YouTube Player, Google Docs, CodePen embeds, Shopify Polaris.
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Mode: open (shadowRoot accessible) / closed (hidden)
- Style encapsulation: CSS внутри не leaks out, snaapshot outside не leaks in
: placeholder для light DOM content projection - ::part() и :host: CSS API для styling shadow от outside
- Browser support: 100% modern browsers (2019+)
Пример
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
p { color: red; } /* scoped */
</style>
<p><slot>Default</slot></p>
`;
}
}
customElements.define('my-card', MyCard);Смежные термины
Больше по теме
Часто задаваемые вопросы
Shadow DOM vs iframe?
Shadow: same JS context, same origin, lightweight. iframe: full browsing context, heavyweight, cross-origin isolation. Shadow для widgets, iframe для third-party untrusted content.
React использует?
Обычно нет (React virtual DOM достаточно). Но React web components wrapper может использовать. Material UI v6 опционально.
CSS styling извне?
::part() для exposed parts, :host для host element, CSS custom properties наследуются. Tailwind через ::part — возможно.