:host-context()
===============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
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.

Try it
------


```css
/\* Selects a shadow root host, only if it is
 a descendant of the selector argument given \*/
:host-context(h1) {
  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
------


```css
:host-context(<compound-selector>) {
  /\* ... \*/
}
```

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:


```html
<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:


```js
const style = document.createElement("style");
const 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(.footer) { color : red; }" +
  ":host { background: rgb(0 0 0 / 10%); 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 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web components
* CSS `:host` pseudo-class
* CSS `:host()` pseudo-class
* CSS `::slotted` pseudo-element
* HTML `<template>` element
* CSS scoping module