Search code examples
javascripthtmlcssangularshadow-dom

How to apply styles on shadow DOM

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?

Solution

  • 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.