Esto me confundió un poco, así que lo escribo mientras está fresco en la mente. El hecho de que esté utilizando un componente web no significa que sus estilos estén completamente aislados. Es posible que tenga contenido dentro de un componente web que tiene un estilo normal junto con el resto de su sitio web. Como esto:
Vea el componente web de lápiz con estilos globales (porque no hay DOM de sombra) de Chris Coyier (@chriscoyier) en CodePen.
Ese <whats-up> elemento aisló la funcionalidad impulsada por JavaScript de sí mismo al adjuntar un controlador de clic al <button> dentro de ella. Pero el estilo de ese botón proviene del CSS global aplicado a esa página.
Mover la plantilla dentro del componente web
Pero digamos que movemos eso <button> en el componente web, por lo que podemos usar <whats-up> todo por sí mismo. Podríamos hacer eso por .innerHTML‘ing el elemento personalizado:
Consulte el componente web de lápiz con estilos globales (porque no hay DOM de sombra) de Chris Coyier (@chriscoyier) en CodePen.
Nuevamente, completamente diseñado por el CSS global. Frio. Eso puede ser deseable. También puede que no sea deseable. Quizás esté buscando componentes web para aislar estilos por usted.
Sombra DOMing la plantilla
Los componentes web pueden aislar estilos (y abstraer la implementación de HTML) a través de Shadow DOM. Aquí está el mismo componente, usando Shadow DOM en su lugar:
Consulte el componente web Pen con estilos locales de Chris Coyier (@chriscoyier) en CodePen.
Tenga en cuenta que la funcionalidad todavía funciona (aunque tuvimos que querySelector a través de shadowRoot), pero hemos perdido totalmente el estilo global. El límite de Shadow DOM (raíz de la sombra) evita que el estilo entre o salga (como un iframe).
Raíz de sombra
No existe una forma global de traspasar ese límite que yo conozco, así que si quieres incorporar estilos, debes incorporarlos a la plantilla.
Mover los estilos (en línea) dentro del componente web
Consulte el componente web Pen con estilos locales de Chris Coyier (@chriscoyier) en CodePen.
Esto sería muy desagradable si ambos realmente quisieran usar Shadow DOM pero también quisieran sus estilos globales. Es curioso que haya un “modo” Shadow DOM para abrir y cerrar para permitir o no permitir la entrada y salida de JavaScript, pero no CSS.
Si ese es usted, probablemente necesite @import todas las hojas de estilo globales que pueda para incorporar esos estilos globales y esperar que estén almacenados en caché y que el navegador sea inteligente al respecto de tal manera que no sea un gran éxito en el rendimiento.
En su lugar, enlace a estilos externos
Usaré el enlace directo de CodePen a la función CSS para importar los estilos desde el propio Pen al componente web:
Consulte el componente web Pen con estilos locales de Chris Coyier (@chriscoyier) en CodePen.
Sin embargo, aparentemente, no hay forma de evitar algo de Flash-Of-Unstyled-Component de esta manera, por lo que se recomienda insertar estilos hasta que lo haya. (bueno, mira ::part).
Las propiedades personalizadas pasan por el DOM en la sombra
¡Otra cosa importante que debe saber es que las propiedades personalizadas de CSS penetran en Shadow DOM! Eso es correcto, lo hacen. Puede seleccionar el componente web en el CSS y configurarlo allí:
Consulte el componente Pen Web con propiedades personalizadas de Chris Coyier (@chriscoyier) en CodePen.
El HTML al que apuntes a través de una ranura tiene estilo global
Entonces, si tienes como:
<my-module>
<h2 slot="header">My Module</h2>
</my-module>Y donde define su DOM de sombra, usa ese encabezado:
<div class="module">
<slot name="header"></slot>
</div>Entonces la <h2> será globalmente modificable, pero eso <div class="module"> no.
Vea las ranuras para bolígrafos y los componentes web de estilo de Chris Coyier (@chriscoyier) en CodePen.
:: parte y :: tema
No investigué esto demasiado porque supongo que es una especificación en la que todavía se está trabajando, pero que probablemente jugará un papel importante aquí. Monica Dinculescu lo cubre en detalle en su artículo :: parte y :: tema, un :: explicador.
Parece una forma de llegar al DOM en la sombra, pero solo al nivel exacto que coincide, no más profundo.
<h4><x-foo>
#shadow-root
<div part="some-box"><span>...</span></div>
<input part="some-input">
<div>...</div> /* not styleable
</x-foo></h4>x-foo::part(some-box) { ... }
/* nope */
x-foo::part(some-box) span { ... }