I'm trying to apply some styles on the shadow DOM. I have this example:
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>In the snippet I'm generating a <p class="text">Hello World!</p> in the shadow root inside that <div id="foo"></div>
I need to apply styles to that class text but as it is inside the shadow DOM I can't apply any styles directly. I have tried with ::shadow, ::ng-deep, ::content but no results yet. Any idea?
I have been trying to find some information about this. And what I can find is that a shadow element is completly seperate from the other parts of the environment. Though as the link below stats
It’s worth noting that inheritable styles like color, font and line-height are still inherited in a shadow DOM. To prevent that, use all: initial or, preferably, all: revert once it has better browser support.
Styling in the Shadow DOM With CSS Shadow Parts
I played around with some of your code and made something like this. Which makes the external css have effect over the 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>Instead of having the setAttribute set a class, you set a part. This seems to get the desired effect that you want. It also needs to be said that you are able to set a attribute in JavaScript to apply style to it directly.