Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

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.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico Si No1612 3 No Si Si
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico Si Si No1612 3 Si Si Si

1. Under consideration

2. See bug 1205323

3. From version 61: this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Ver también

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: rhssr, lajaso
Última actualización por: rhssr,