:host Pseudo Class - CSS Portal

:host CSS Pseudo Class

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The :host pseudo-class in CSS is used within the context of Web Components to target the shadow host element itself - the element that contains the shadow DOM. Unlike normal selectors, which style elements inside the shadow DOM or globally, :host allows styles defined within a shadow DOM to affect the host element while maintaining encapsulation. This is particularly useful for applying base styles to a custom element without exposing internal shadow DOM structure to the global stylesheet.

The primary function of :host is to style the host element unconditionally, meaning it applies styles directly to the element that hosts the shadow tree, regardless of any classes or attributes on that element. This allows developers to define default visual properties for their components, such as display, margin, or color.

For example:

HTML:

<custom-card>Hello, World!</custom-card>

CSS (inside the shadow DOM of custom-card):

:host {
    display: block;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #333;
}

In this example, :host ensures that the custom-card element itself has a block layout with padding, border, and background color, regardless of its placement in the document. The styles do not leak outside the shadow DOM, preserving encapsulation, but still affect the host element directly.

Because :host is evaluated from within the shadow DOM, it cannot be used in the global stylesheet to target host elements. This makes it distinct from regular element selectors or class selectors, which operate globally. Its primary purpose is to give component authors control over the visual appearance of their custom elements in a safe, encapsulated manner.

Syntax

:host {
  /* ... */
}

Example

HTML

<custom-card>

  This is a custom card element.

</custom-card>

<script>

class CustomCard extends HTMLElement {

    constructor() {

        super();

        const shadow = this.attachShadow({ mode: 'open' });



        const wrapper = document.createElement('div');

        wrapper.textContent = this.textContent;



        const style = document.createElement('style');

        style.textContent = `

            :host {

                display: block;

                padding: 20px;

                border: 2px solid #007bff;

                border-radius: 8px;

                background-color: #f0f8ff;

                color: #333;

                font-family: Arial, sans-serif;

            }

        `;



        shadow.appendChild(style);

        shadow.appendChild(wrapper);

    }

}



customElements.define('custom-card', CustomCard);

</script>

CSS

:host {

    display: block;

    padding: 20px;

    border: 2px solid #007bff;

    border-radius: 8px;

    background-color: #f0f8ff;

    color: #333;

    font-family: Arial, sans-serif;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS :host pseudo class. Hover over a browser icon to see the version that first introduced support for this CSS psuedo class.