I'm experimenting with applying styles to the shadow DOM. Consider the following example:
const element = document.getElementById("bar");
const shadowRoot = element.attachShadow({ mode: "open" });
const greeting = document.createElement("p");
greeting.setAttribute("class", "message");
greeting.textContent = "Hello Universe!";
shadowRoot.appendChild(greeting);#bar::shadow .message{
color: green; /*attempting to style */
}<div id="bar"></div>In the code snippet above, a
<p class="message">Hello Universe!</p><div id="bar"></div>I'm struggling to apply styles to the message class as it's located inside the shadow DOM. I've attempted using ::shadow, ::ng-deep, ::content but have not been successful. Any suggestions?