Estoy tratando de aplicar algunos estilos en la sombra DOM. Tengo este ejemplo:
const existingElement = document.getElementById("foo"); const shadow = existingElement.attachShadow({ mode: "open" }); const message = document.createElement("p"); message.setAttribute("class", "text"); message.textContent = "Hello World!"; shadow.appendChild(message); #foo::shadow .text{ color: blue; //not working } <div id="foo"></div> En el fragmento, estoy generando un <p class="text">Hello World!</p> en la raíz oculta dentro de ese <div id="foo"></div>
Necesito aplicar estilos a ese text de clase, pero como está dentro del DOM de la sombra, no puedo aplicar ningún estilo directamente. He probado con ::shadow , ::ng-deep , ::content pero aún no tengo resultados. ¿Alguna idea?
He estado tratando de encontrar algo de información sobre esto. Y lo que puedo encontrar es que un elemento de sombra está completamente separado de las otras partes del entorno. Aunque como el enlace debajo de las estadísticas
Vale la pena señalar que los estilos heredados como el color, la fuente y la altura de línea aún se heredan en un DOM de sombra. Para evitar eso, use all: initial o, preferiblemente, all: revert una vez que tenga un mejor soporte del navegador.
Estilo en el DOM de la sombra con CSS Shadow Parts
Jugué con algo de tu código e hice algo como esto. Lo que hace que el css externo tenga efecto sobre el shadow dom.
const existingElement = document.getElementById("foo"); const shadow = existingElement.attachShadow({ mode: "open" }); const message = document.createElement("p"); message.setAttribute("part", "text"); message.textContent = "Hello World!"; shadow.appendChild(message); #foo::part(text) { color: blue; } <div id="foo"></div>En lugar de hacer que setAttribute establezca una clase, establece una parte . Esto parece obtener el efecto deseado que desea. También debe decirse que puede establecer un atributo en JavaScript para aplicarle estilo directamente.