:host-context()
Quick Summary for :host-context()
The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
Code Usage for :host-context()
/* Selects a shadow root host, only if it is    a descendant of the selector argument given */ :host-context(h1) {   font-weight: bold; }  :host-context(main article) {   font-weight: bold; }  /* Changes paragraph text color from black to white when    a .dark-theme class is applied to the document body */ p {   color: #000; }  :host-context(body.dark-theme) p {   color: #fff; } 
More Details for :host-context()

:host-context()

The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.

In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.

One typical use of this is with a descendant selector expression — for example h1 — to select only instances of the custom element that are inside an <h1>. Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a .dark-theme class is applied to <body>.

Note: This has no effect when used outside a shadow DOM.

/* Selects a shadow root host, only if it is    a descendant of the selector argument given */ :host-context(h1) {   font-weight: bold; }  :host-context(main article) {   font-weight: bold; }  /* Changes paragraph text color from black to white when    a .dark-theme class is applied to the document body */ p {   color: #000; }  :host-context(body.dark-theme) p {   color: #fff; } 

Syntax

:host-context( <compound-selector> )

where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '.' <ident-token><attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s

Examples

Selectively styling shadow hosts

The following snippets are taken from our host-selectors example (see it live also).

In this example we have a simple custom element — <context-span> — that you can wrap around text:

<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> 

Inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some CSS rules:

let style = document.createElement('style'); let span = document.createElement('span'); span.textContent = this.textContent;  const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(style); shadowRoot.appendChild(span);  style.textContent = 'span:hover { text-decoration: underline; }' +                     ':host-context(h1) { font-style: italic; }' +                     ':host-context(h1):after { content: " - no links in headers!" }' +                     ':host-context(article, aside) { color: gray; }' +                     ':host(.footer) { color : red; }' +                     ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; 

The :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>. We've used it to make it clear that the custom element shouldn't appear inside the <h1> in our design.

Specifications

Specification
CSS Scoping Module Level 1 # host-selector

See also

Web components :host :host() Select your preferred language English (US)Français日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Interesting...

Me
Random CSS Property

float

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).
float css reference