:host

This translation is incomplete. Please help translate this article from English

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

Syntax not found in DB!

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

Especificación Estado Comentarios
CSS Scoping Module Level 1
La definición de ':host' en esta especificación.
Working Draft Definición Inicial.

Compatibilidad con navegadores

Compatible con Chrome y Safari.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:hostChrome Soporte completo 54Edge Sin soporte No
Notas
Sin soporte No
Notas
Notas Under consideration
Firefox Soporte completo 63
Soporte completo 63
Sin soporte 61 — 63
Deshabilitado
Deshabilitado From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 41Safari Soporte completo 10WebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 61 — 63
Deshabilitado
Deshabilitado From version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 41Safari iOS Soporte completo 10Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.

Ver también