Styling component host (:host, :host(), :host-context())

[LeaVerou]

Style the custom element root from within Shadow DOM.

Code sample

:host([vertical]) {
	flex-flow: column;
	align-items: stretch;
}

MDN URL:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:host
• https://developer.mozilla.org/en-US/docs/Web/CSS/:host_function
• https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context

Specification URL:

https://drafts.csswg.org/css-scoping/#host-selector

How stable is this feature?

Stable (Widely supported for several years)

Type of feature

CSS

What focus area does this feature fall under?

Making Web Components