Shadow-Host
In the architecture of Web-Components, a Shadow-Host is a standard Document-Object-Model node that serves as the mounting point for a Shadow-Root. It acts as the bridge between the light DOM—the regular DOM tree of the page—and the encapsulated Shadow-DOM tree. This mechanism allows developers to attach a hidden, separate DOM to an element, providing a robust way to manage Encapsulation in web applications.
Technical Implementation
An element becomes a Shadow-Host when the Element.attachShadow() method is called upon it via JavaScript. Once attached, the host's children are no longer rendered; instead, the browser renders the contents of the Shadow-Root. However, the Shadow-Host itself remains a part of the light DOM, meaning it can be targeted by global CSS selectors and scripts, while its internal shadow tree remains protected from external interference.
Styling and Interaction
One of the most powerful features of the Shadow-Host is its ability to be styled from the inside using the :host pseudo-class. This allows a component to define its own exterior appearance while still allowing users of the component to override those styles from the outside. Detailed specifications regarding these interactions can be found on the MDN Web Docs and the official W3C DOM Specification. The Shadow-Host is also responsible for event retargeting, ensuring that events bubbling up from the shadow tree appear to originate from the host itself to maintain the abstraction of the component.