Así que tengo los siguientes styles :
static styles = [css, icons]; Luego configuré renderRoot en lightdom:
protected createRenderRoot(): Element | ShadowRoot { return this; }Con esto no se aplica el estilo y tengo que agregar manualmente:
render() { return html` <style> ${css.cssText} ${icons.cssText} </style> Si createRenderRoot , los estilos funcionan sin configurar la etiqueta <style> en la función de render .
¿Alguien puede decirme qué he hecho mal? ¿O por qué está pasando esto?
El comportamiento predeterminado de createRenderRoot de lit es crear una raíz de sombra y agregar los estilos establecidos en la propiedad de styles estáticos a dicha raíz de sombra.
Entonces, cuando anula createRenderRoot para usar this como la raíz (ergo, no usa shadow DOM en absoluto) también está eliminando el código que agregaría los estilos también.
La razón principal de esto es que los estilos solo se pueden definir si están dentro del shadow DOM. Agregarlos a un elemento personalizado que no usa shadow DOM también haría que esos estilos se aplicaran a cualquier otro nodo que coincidiera con los selectores de CSS utilizados.
Esto básicamente te deja con dos opciones:
Más información: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot