Ejemplo de CSS: host ()

los :host()CSSLa función de pseudoclase selecciona el host de sombra del sombra DOM que contiene el CSS, se usa en el interior (para que pueda seleccionar un elemento personalizado desde el interior de su DOM de sombra), pero solo si el selector dado como parámetro de la función coincide con el host de sombra.

El uso más obvio de esto es poner un nombre de clase solo en ciertas instancias de elementos personalizados y luego incluir el selector de clase relevante como argumento de función. No puede usar esto con una expresión de selector de descendientes para seleccionar solo instancias del elemento personalizado que están dentro de un antepasado en particular. Ese es el trabajo de :host-context().

Nota: Esto no tiene ningún efecto cuando se usa fuera de un DOM de sombra.

/* Selects a shadow root host, only if it is
   matched by the selector argument */:host(.special-custom-element)font-weight: bold;

Sintaxis

:host(  )
where 
 = #
where 
 = [?*[*]*]!
where 
 = |? '*'
 = |||
 = ':' 
 = ':'  | ':'   ')'
where 
 = ? 
 = [  | '*' ]?|
 = 
 = '.' 
 = '['  ']' | '[' [  |  ]? ']'
where 
 = [ '~' ||| '^' | '$' | '*' ]? '='
 = i | s

Ejemplos de

Aplicar estilos de forma selectiva a los hosts de sombras

Los siguientes fragmentos se han extraído de nuestra ejemplo de selectores de host (verlo en vivo tambien).

En este ejemplo, tenemos un elemento personalizado simple: – que puede envolver el texto:

<h1>Host selectors <ahref="#"><context-span>examplecontext-span>a>h1>

Dentro del constructor del elemento, creamos style y span elementos, llene el span con el contenido del elemento personalizado y rellene el style elemento 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; ';

los :host(.footer) color : red; estilos de reglas todas las instancias del elemento (el host de la sombra en este caso) en el documento que tiene el footer clase establecida en ellos: la hemos usado para dar instancias del elemento dentro de la