Aplicar estilo a un componente web

Esto me confundió un poco, así que lo escribí mientras lo tenía 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 tenga un estilo normal junto con el resto de su sitio web.Como esto:

Ese whats-upelemento aisló la funcionalidad propia de JavaScript al adjuntar un controlador de clic en buttonsu interior. 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 lo trasladamos buttonal componente web, para que podamos usarlo whats-uppor sí solo. Podríamos hacerlo agregando .innerHTMLel elemento personalizado:

Nuevamente, completamente diseñado por CSS global. Fresco. Eso puede ser deseable. También puede que no sea deseable. Quizás esté buscando componentes web para aislar estilos para usted.

Plantilla Shadow DOMing

Los componentes web pueden aislar estilos (y abstraer la implementación HTML) a través de Shadow DOM. Aquí está el mismo componente, usando Shadow DOM en su lugar:

Tenga en cuenta que la funcionalidad aún funciona (aunque tuvimos que hacerlo querySelectora través de shadowRoot), pero hemos perdido por completo el estilo global . El límite de Shadow DOM (raíz de sombra) evita que el estilo entre o salga (algo así como un iframe).

No existe una forma global de traspasar ese límite que yo sepa, por lo que si desea incorporar estilos, debe incorporarlos a la plantilla.

Mover los estilos (en línea) dentro del componente web

Esto sería muy desagradable si ambos realmente quisieran usar Shadow DOM pero también quisieran sus estilos globales. Es curioso que exista 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 tu caso, probablemente necesitarás @importtodas las hojas de estilo global que puedas para incorporar esos estilos globales y esperar que se almacenen en caché y que el navegador sea inteligente al respecto de tal manera que no afecte mucho 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:

Aparentemente, no hay forma de evitar un componente 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 de sombra.

¡Otra cosa importante que debes saber es que las propiedades personalizadas de CSS penetran en Shadow DOM! Así es, lo hacen. Puedes seleccionar el componente web en el CSS y configurarlo allí:

El HTML al que apunta 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 tu shadow DOM usas ese encabezado:

div  slot name="header"/slot/div

Entonces h2se podrá diseñar globalmente, pero divno será así.

::parte y ::tema

No lo he investigado demasiado porque se trata de una especificación en la que todavía se está trabajando, supongo, pero que probablemente tendrá un papel importante en este caso. Monica Dinculescu lo explica en detalle en su artículo ::part and ::theme, an ::explainer.

Parece una forma de llegar al DOM de sombra, pero solo hasta el nivel exacto que coincide, no más profundo.

h4x-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 { ... }