How to can I manipulate the shadow root without using setTimeout?

Question

I have some ui elements from a third party that I want to manipulate to set a different styling.

First I wrote a explicit css rule which obviously did not do anything.

Currently I am using this hack:

mounted() {
  setTimeout(
      function () {
              document
                 .querySelector("#wrapper")
                 .shadowRoot.querySelector(".div-in-shadow-root")
                 .setAttribute("style", "box-shadow:none");
    }.bind(this),
    1000
  );
}

This leads to some flickering in the UI that looks trashy.

Is there any better solution to do this?

probably no need for the 1000 ms, can be 0. But you will always be changing DOM **after** it was displayed. Might be possible to create your own component with ``extends customElements.get("that-component")`` and work on its shadowDOM **before** it is displayed. — Danny '365CSI' Engelman, Dec 15 '22 at 17:13
Why do you even need that in the first place? Can't you use a regular conditional on the class itself? Also, since you're using Vue3, give a try to that one: https://stackoverflow.com/a/74789390/8816585 — kissu, Dec 15 '22 at 18:01

score 0 · Accepted Answer · answered Dec 15 '22 at 23:49

Found out, that there is only the possibility to change the styling via css, if the developer of the third party ui element allows it through the part property.

If this is the case, this can be addressed like this:

#wrapper::part(definedPartName) {
  box-shadow: none;
}

How to can I manipulate the shadow root without using setTimeout?

1 Answers1