CSS :host: Style a Web Component from Within
The :host pseudo-class lets a web component style itself from the inside out. Use it inside a shadow DOM to apply styles to the host custom element, making components self-contained. The key footgun: it only works inside a shadow DOM; it has no effect in.
Why it exists
Web components need encapsulation to be truly reusable and avoid style conflicts with the main document. CSS normally cascades from outside-in. The :host pseudo-class was created to solve the reverse problem: how can a component's internal styles affect its own container, the host element, from within its isolated shadow DOM?
The mental model
Think of :host as a component's internal monologue about its own appearance. While external CSS can style a component from the outside, :host is the component's own set of rules for its root element, defined within its encapsulated style scope. It's the "self" in self-styling, allowing a component to ship with its own default look.
How it works
When you attach a shadow DOM to a custom element, you can include a <style> tag inside it. Within that style block, the :host selector specifically targets the custom element that is hosting the shadow DOM. Any CSS rules applied to :host will style the host element itself, providing a baseline appearance that is encapsulated from the global page styles.
When to use it
Use :host to define the default, built-in styles for your custom element. This is the place for setting fundamental properties like display: block, default padding, background color, or border styles. You can also use it functionally, like :host(.active) or :host([disabled]), to create styles that react to classes or attributes placed on the host element from the outside.
When not to use it
Do not use :host in any stylesheet that is not inside a shadow DOM. It is not a general-purpose selector and will have absolutely no effect in a global stylesheet. It is exclusively for styling the shadow host from within its own shadow DOM.
One canonical example
Imagine a custom element called <info-box>. To ensure every info box has a consistent look, you would define its styles inside its shadow DOM. The CSS might be :host { display: block; padding: 1em; background-color: #f0f8ff; border: 1px solid #add8e6; }. Now, any time you use <info-box>Hello</info-box> in your HTML, it will automatically render with that blue-tinted background and border, without needing any external CSS.
Interview question
What is the primary function of the CSS :host pseudo-class when used inside a Web Component's shadow DOM?
- a.To create a public API for external styles to override specific component properties.
- b.To define the default visual appearance of the custom element itself, from its internal stylesheet.Correct
- c.To prevent any external CSS rules from affecting the host custom element's styling.
- d.To allow global stylesheets to directly style elements nested within the component's shadow DOM.
Why? this is the answer
The :host pseudo-class is used to define the default, built-in styles for the custom element itself, from within its own encapsulated shadow DOM. Option D is incorrect because shadow DOM encapsulation prevents external styles from directly targeting elements *inside* the shadow DOM.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #web components
- #shadow dom
- #selectors
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles