Web Components (Lit)

[jame5cross]

Is there any documentation for integrating TW Elements with Lit Web Components? I can get them to render but the js interactions aren't working such as the tooltip. Is it a scoping issue or shadowRoot issue?

[JoshSchroder-tdlr]

I ran into a similar issue using Stencil.js. The CSS portion of the components can be imported without a problem, but the JS portions don't work.

When I dug deeper into it, I found that the TWE selector engine (/src/js/dom/selector-engine.js) appears incapable of crossing the Shadow DOM boundary. My solution was to default to light DOM.

It would be great if TWE would support shadow DOM.

[jame5cross]

Thanks for your reply Josh, I guess it's true of most libraries. I've tried Preline also and I had the same issue.

[iprzybysz]

Hi, unfortunately we don't have any documentation for integrating TW Elements with Lit Web Components. Maybe it will be a new feature in future releases. We can't also help you with this issue because we don't have enough experience with Lit Web Components. Maybe someone from community will help you with it.

[JoshSchroder-tdlr]

Hello iprzybysz,

I don't believe that this is a framework specific issue.

It appears that TWE cannot correctly query elements within the Shadow DOM, which is now part of the HTML standard.

I suspect that this issue may be related to the TWE selector engine (/src/js/dom/selector-engine.js). Starting on line 20, the following functions don't seem to have any possible way of supporting Shadow DOM syntax:

find(selector, element = document.documentElement) {
    return [].concat(
      ...Element.prototype.querySelectorAll.call(element, selector)
    );
}

findOne(selector, element = document.documentElement) {
    return Element.prototype.querySelector.call(element, selector);
},

I haven't done any testing to support this theory, but that's where I've landed on it.

I hope that's helpful.

[iprzybysz]

We appreciate your insights and detailed explanation. Our team will thoroughly investigate this matter.