Using alpine.js to wrap a custom element

[sjoe77]

Hello, I am impressed with alpine.js so far and I am trying to use alpine for its declarative wiring of events on web components(custom element). I have a very simple custom element and I am using LitElement to create it

<my-element x-model="bar"></my-element>

This custom element simply has a html text element inside it. Inside the component I have bound the value of text element as shown below

<input class="bg-teal-100 font-bold" type="text" .value="${this.value}" @keydown="${this.changeHandler}">

//bubble the event up so that alpine should be able to see it--//
 changeHandler(ev){
    this.value = ev.target.value
    const ev2 = new ev.constructor(ev.type, ev)
    this.dispatchEvent(ev2)
  }

Outside I am using alpine with x-model(two way binding). I am expecting this would update my data. I am using the <p x-text="bar"></p> to display if my data is in sync with what I am typing

<div x-data="data()">
        <my-element x-model="bar"> </my-element>
        <p x-text="bar"></p>
      </div>

function data(){
            return  { 
                bar:"abc",
            }

The issue is that my data is one key stroke behind. If I type 1234 in the text box I see 123 displayed below. I have bubbled up the @keydown event from the custom element but I am still lagging one key stoke behind. Without bubbling any events the x-model was not updating the data. So this is better but what can I do to make this work properly? How does x-model sync up the data?

Any insight/clue are appreciated

I have attached a screenshot.

Thanks!

[SimoTod]

you need to set the input event (@input) but be aware that custom elements are not supported yet so you will need a lot of manual wiring (i.e. the event thing you posted) to make it work properly.
Alpine cannot access the shadow DOM so you can's use any alpine directives inside your custom element: @keydown, despite sharing the same syntax, is handled by LitElement.

[sjoe77]

Thanks @SimoTod. That worked perfectly. Yes I also aware of the shadow DOM issue. My use case is to provide the users of my custom elements a fantastic declarative api (rather than imperative attachListener...). In this use case I will only be using alpine outside the component not inside. Your suggestion is on point that that I may have do some wiring to make this happen. I appreciate your response.