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?

Answer 1

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;
}