:host CSS Pseudo Class


The :host pseudo-class is a selector in Cascading Style Sheets (CSS) that is primarily used in the context of web components. Web components are custom, reusable elements built using HTML, JavaScript, and CSS. The :host pseudo-class allows you to style the container or host element of a web component from within the component's shadow DOM.

In other words, when you define styles with :host, you're targeting the element that hosts the web component, as opposed to targeting elements within the shadow DOM itself. This enables encapsulation of styles within a web component, preventing them from leaking out or being affected by external styles.

Here's a basic example of how :host can be used in CSS:

/* Styles applied to the host element of a web component */
:host {
display: block;
background-color: lightgray;
border: 1px solid gray;
padding: 10px;

In this example, the :host pseudo-class is used to define styles for the container element of the web component. These styles will only affect the element that hosts the component, ensuring that the component's appearance remains isolated and encapsulated.

Overall, :host is a crucial part of styling web components and contributes to the modularity and maintainability of web applications by allowing for encapsulated styling within custom elements.


:host {
  /* ... */


Sorry, no example yet!

Browser Support

The following table will show you the current browser support for the CSS :host pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023