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

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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo SiEdge Sin soporte No
Notas
Sin soporte No
Notas
Notas Under consideration
Firefox Soporte completo 63
Soporte completo 63
Soporte completo 61
Notas Deshabilitado
Notas See bug 1205323
Deshabilitado 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.
IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo SiWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile Sin soporte No
Notas
Sin soporte No
Notas
Notas Under consideration
Firefox Android Soporte completo 63
Soporte completo 63
Soporte completo 61
Notas Deshabilitado
Notas See bug 1205323
Deshabilitado 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.
Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Si

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

 

Etiquetas y colaboradores del documento

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