How to add stylesheet to shadow dom?

Question

I am using web components. I have the following html structure

<div class="test"> 
   #shadow-root (open)
    <overlay-trigger type="modal">
        <div id = "login-dialog">
         #shadow-root (open)
         <div id = "modal">

I have the following code

const styleString = String(styles);
const style = document.createElement("style");
style.type = "text/css";
style.innerHTML = styleString;

const styleString2 = String(guestModalStyles);
const style2 = document.createElement("style");
style2.type = "text/css";
style2.innerHTML = styleString2;

let host = this.renderRoot?.querySelector('overlay-trigger[type="modal"]')?.querySelector("#login-dialog")?.shadowRoot?.querySelector(".modal");
if (host) {
   host?.appendChild(style);
   host?.appendChild(style2);
}

How can I add styles to the modal element? The one with class = "modal"? I'm I doing it right above?

Look into ``CSS variables`` and CSS ``:part`` You only go the stylesheet route (append it into the shadowDOM) when those two don't do what you need. There is also ``constructable stylesheets``, but Safari support only since version16.4 — Danny '365CSI' Engelman, Aug 04 '23 at 05:46

Milad Hossainie - KAKA SHEX · Answer 1 · 2023-08-04T10:09:52.947

Your code looks for the most part right, however there are several changes expected to guarantee the styles are applied to the right component inside the Shadow DOM.

Rather than utilizing this.renderRoot, utilize the shadowRoot property straightforwardly. On the off chance that you are utilizing the this.attachShadow() technique to make the Shadow DOM, this.shadowRoot will provide you with the base of the Shadow DOM. While utilizing querySelector inside the Shadow DOM, you want to utilize the ::shadow or ::opened pseudo-components to choose components inside the Shadow DOM.

changed code:

const styleString = String(styles);
const style = document.createElement("style");
style.type = "text/css";
style.innerHTML = styleString;

const styleString2 = String(guestModalStyles);
const style2 = document.createElement("style");
style2.type = "text/css";
style2.innerHTML = styleString2;

const overlayTrigger = this.shadowRoot.querySelector('overlay-trigger[type="modal"]');

if (overlayTrigger) {
  const loginDialog = overlayTrigger.shadowRoot.querySelector("#login-dialog");

  if (loginDialog) {
    const modal = loginDialog.shadowRoot.querySelector(".modal");

    if (modal) {
      modal.appendChild(style);
      modal.appendChild(style2);
    }
  }
}

score 0 · Answer 2 · answered Aug 03 '23 at 18:39

An easier way just to know you are doing this correctly is to add a css path getter function (as demonstrated here: Get CSS path from Dom element) to your code temporarily (use console.log or alert) then remove the code but save the selector.

Once you have an Element object, styling it is as easy as

var elem = ...;
elem.style.color = "red";

score -1 · Answer 3 · answered Aug 03 '23 at 18:49

you can use document.styleSheets property for accessing your CSS pages(it returns an array, iterate over array to access specific CSS stylesheet) which are linked to your html page and use csspagefromstyleSheet.insertRule() method to add styles to your CSS.

How to add stylesheet to shadow dom?

3 Answers3