:host
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
La pseudo-clase CSS :host selecciona la sombra host de sombra DOM que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.
Nota: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.
/* Selects a shadow root host */
:host {
font-weight: bold;
}
Sintaxis
:host {
/* ... */
}
Ejemplos
Los siguientes fragmentos se toman de nuestro ejemplo de selectores de host (ver también en directo).
En este ejemplo, tenemos un elemento personalizado simple — <context-span> — que se puede envolver alrededor del texto:
<h1>
Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
Dentro del constructor del elemento, creamos los elementos style y span, llenamos el span con el contenido del elemento personalizado y llenamos el elemento style con algunas reglas CSS:
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; }";
La regla :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } estiliza todas las instancias del elemento <context-span> (la sombra host en esta instancia) en el documento.
Especificaciones
| Specification |
|---|
| CSS Shadow Module Level 1 # host-selector |