Integration with web components

[hypeJunction]

It's getting tiring, building and rebuilding things in React and Vue, so I am wondering if we should take the plunge and go in the direction of web components. I really like what zagjs is doing, as it seems, just like me, you are fed up with rewriting the same code over and over from project to project. But before I do any further digging, what's your take on making zagjs working with web components, anything you see that might make it difficult or impossible? I was thinking lit or webc integration could be an interesting thing to try out.

[segunadebayo]

Totally feel you @hypeJunction

We’re also all into modeling components once and reusing everywhere possible.

Regarding web components, we’re open to seeing a Lit implementation similar to Shoelace https://github.com/shoelace-style/shoelace, or Stencil.

Feel free to open a draft PoC of how this could work.

[max-scopp]

I've tried a thing with stencil: https://github.com/max-scopp/zag-stencil-demo/blob/master/src/components/my-component/my-component.tsx#L52-L83

I dislike how I re-instatiate the VanillaMachine every time the component's props change, just so when the component is changed externally the machine is kept up to date.

LMKWYT

[hypeJunction]

Just doing some legwork reading. This could be a showstopper lit/lit#923

[segunadebayo]

There’s an helper library that can help with this
https://github.com/open-wc/open-wc/blob/master/packages/lit-helpers/CHANGELOG.md

[hypeJunction]

Perhaps the connector could expose a render function that spells out the template with all the props and events, but it might require quite some work to express all component machines in that manner.

[ico85]

There is a vanilla example in this repository for vanilla-ts. Can I use it with lit web-components? Or do we need a lit implementation? Tried to figure it out, but it looks very complicated to me :/

I wanted to implement an accordion web-component with lit and I thought it would be nice to use zag's accordion machine.

[anubra266]

Previous lit samples are here
https://github.com/chakra-ui/zag/blob/v0/examples/lit-ts/src/accordion-element.ts
Try extending current vanilla samples to match this

[gperdomor]

Hi folks... I added Lit examples again :D
This is the PR #2608

The focus of the MR is to provide a basic integration between Zag and Lit...

A few highlights:

• The base Component class already handle the id creation
• There is no props in the example components, just Zag integration, this means that you can't change the image in the Avatar component or pass custom items to combobox
• Combobox have issues with item list, are highlighted with blue color but not return to original
• spreadProps function was removed in favor of spread from @open-wc/lit-helpers package
• normalizeProps was updated to prefix boolean keys with ? and replace on by @ in event handlers

[tala91]

Hi @gperdomor! 👋

Great work on this Lit integration! I've been testing your implementation because we're also very interested in using Zag to build a web components library with Lit.

I can confirm the blue highlighting issue you mentioned with the combobox, and I also found that the popover positioning was broken (always appearing in top-left corner instead of positioning correctly relative to the trigger).

However, I found a solution for the positioning issue! 🎉

Adding this to the initMachine call fixes the popover positioning:

getRootNode: () => this.renderRoot,

After adding this, the popover/dropdown correctly appends to the shadow root and positions properly relative to its trigger element. This makes sense because Lit uses shadow DOM by default, and Zag needs to know the correct root node context for proper DOM manipulation and positioning calculations.

This might be worth adding to your base Component class or Reactive Controller implementation to ensure all Zag components work correctly with Lit's shadow DOM.

Thanks for pioneering this integration - Popover it's working great now with this fix! Would be fantastic to see this merged. 🚀

[gperdomor]

@tala91 thank you for your words 😄... I updated the code with your suggestions...

[gperdomor]

One more thing... I added the base Component class to the examples, but I think this is not the best approach, probably a Reactive controller is better for this... "A reactive controller is a separate object owned by a component"... In the same UI library I can have normal components without zag machine and other components which owns or contains an zag machine both extending the same base class, but the second one using the reactive controller...

[gperdomor]

I added a new Zag Reactive Controller and created a new Avatar component using it... Please let me know WDYT @segunadebayo @anubra266 @max-scopp