Question 222419 in Html Question posted in
Some basic documentation can be found here.

Html – How to add stylesheet to shadow dom?

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?

Tags:

3

Answers


  1. 0

    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.

    Here is the 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);
    }
  }
}
    Login or Signup to reply.
  2. 0

    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";
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search