Issue with shadow DOM

I’m trying to build a webcomponent with tippyjs in stenciljs.

    const target = this.host.shadowRoot.querySelector("#target") as HTMLDivElement;
    const template = this.host.shadowRoot.querySelector("#template") as HTMLDivElement;
    console.log(target);
    console.log(template);
    tippy(target, {
      html: template,
      onShow() {
        console.log("about to show");
      },
      onHide() {
        console.log("about to close");
      }
    });

This is the component will load function (basically on init), and this is the actual html.

          <div id="template" style={{ display: "none" }}>
          <h3>
            Cool <span>HTML</span> inside here!
          </h3>
        </div>

Any help would be greatly appreciated.

[Ntuk]

A ‘bit’ late to the party but did you guys figure this out? 😃

[miguelyoobic95]

Hey @atomiks, I commented on one of the issues before but I am not sure you saw the comment, I’m happy to help you with this since we have exactly the same use case and this will make your library compatible with things like Ionic4, StencilJS which have now started to heavily use shadow DOM. I’m happy to schedule a call or something if needed to discuss