:host selector
The CSS :host pseudo-class selects the host element associated with the current shadow-tree or component style scope.
Web Components in Action
The :host CSS pseudo-class selector matches the shadow host from within its shadow tree.
- How it is used
- Styles a custom element’s shadow host from its shadow-tree CSS, including layout and class-dependent appearances.
- How deep it goes
- Works through basic and class-qualified rules, inherited-style nuance, and a non-Shadow-DOM selector fallback.
- Examples
- Uses a stepper’s flex layout, exercise-card classes, library and plan views, and a slider template.
- What you can do after
- Operate/configure it in Shadow DOM CSS to style hosts and switch host styles using classes.
Pro Angular 16
The :host selector is a CSS selector that targets the host element of an Angular component.
- How it is used
- Targets an Angular component host so component styles can react to host attributes under view encapsulation.
- How deep it goes
- Explains the selector through one disabled-button rule and stops short of broader selector mechanics.
- Examples
- Uses a customButton component whose host and internal button receive disabled-state theme colors.
- What you can do after
- Apply the selector to style component internals when an attribute such as disabled is placed on the host element.
Related concepts
- :host-context() selectoralternative to · The :host-context() selector is a Shadow DOM CSS selector that matches a shadow host when an ancestor satisfies a specified selector.
- hiddencontrasts with · A hidden element is one that is not displayed or visually rendered to the user, though it may remain in the document and affect layout.
- view encapsulationused by · View encapsulation is Angular's mechanism for scoping component styles and, when applicable, rewriting their selectors to isolate them from other components.
- Shadow DOMused by · Shadow DOM is a web platform mechanism for attaching a DOM subtree to an element while encapsulating its structure and styles from the surrounding document.
- Web Componentsuses · 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.
- CSS selectorkind of · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
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.