can't use in web component

here is my web component

class ChairComparison extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: "closed" });
  }
  connectedCallback() {
    this.render();
  }

  render() {
    const image1src = this.getAttribute("src1");
    const image2src = this.getAttribute("src2");

    const div = document.createElement("div");
    div.setAttribute("id", "slider");
    this.root.appendChild(div);

    let slider = new juxtapose.JXSlider(
      div,
      [
        {
          src: image1src,
        },
        {
          src: image2src,
        },
      ],
      {}
    );

    const link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute(
      "href",
      "https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css"
    );
    this.root.appendChild(link);
  }
}

customElements.define("chair-comparison", ChairComparison);

Juxtapose uses document.querySelector which is not available on web components (as they are not found in the document, but their own shadow.

I fixed it with the following commit

https://github.com/alifeee/blog/commit/393fd7837bec9b6a6a128fb3c6fb72ae7958049f

- this.wrapper = document.querySelector(this.selector);
+ // if selector is a DOM element, use it directly
+ if (this.selector instanceof Element) {
+   this.wrapper = this.selector;
+ } else {
+   this.wrapper = document.querySelector(this.selector);
+ }

Start at the JXSlider initialization and trace how its selector is resolved, focusing on the document.querySelector call mentioned in the issue. Reproduce the supplied web component example and verify that a slider can initialize inside its shadow root without breaking normal selector usage.