Shadow host
A shadow host is a DOM element to which a shadow root is attached and whose shadow tree it contains.
Pro Angular 16
A host element is the HTML element affected by an Angular binding through changes to its appearance, content, or behavior.
- How it is used
- Identifies the HTML element affected by a binding or directive, the source of a bound event, or the element hosting a component.
- How deep it goes
- Defines the host’s role and illustrates binding, event, directive, and component behavior without detailing rendering internals.
- Examples
- Uses a div with `ngClass`, a table cell handling `mouseover`, configured directive attributes, and component elements in a template.
- What you can do after
- Apply it via Angular templates to identify which element a binding changes, sends an event, configures a directive, or hosts a component.
Web Components in Action
A shadow host is the page-DOM node to which a shadow root is attached and whose shadow tree it parents.
- How it is used
- Explains how a Web Component’s page-DOM element relates to its shadow root and controls styling at the component boundary.
- How deep it goes
- Defines the host, root, tree, and boundary, then demonstrates host styling; it stops short of broader Shadow DOM internals.
- Examples
- Uses a stepper component, sample-component selectors, :host rules, attachShadow(), and page-level text styling.
- What you can do after
- Apply host styling with :host and distinguish the page element from its shadow root and internal shadow tree.
Related concepts
- Web Componentspart of · Web Components are browser standards and APIs, including custom elements and shadow DOM, for creating reusable web interface elements with encapsulated structure, presentation, and behavior.
- :host selectorused by · The CSS :host pseudo-class selects the host element associated with the current shadow-tree or component style scope.
- event bindingused by · Event binding is an association between an event and the expression or handler that responds when the event occurs.
- data bindingused by · Data binding is a technique that connects application data or state to user-interface elements or component properties so values or behavior can be represented or synchronized.
- directiveused by · A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.
- shadow roothas part · A shadow root is the root node of an encapsulated Shadow DOM subtree attached to a host element.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.