x-model.debounce leads to undefined inside shadow root

[skurfuerst]

Hey everybody,

I am maybe using AlpineJS a bit weirdly, initializing it inside a shadow root like the following way https://jsfiddle.net/ra15tbmv/ (as invented by #2825 ).

However, if I combine x-model with debounce, the value is changed to undefined - and I don't know why yet...

You can see a minimal example here:

<script src="https://unpkg.com/alpinejs/dist/cdn.js" defer></script>

<script>
document.addEventListener("alpine:init", () => {
  for (const tpl of document.querySelectorAll("template[x-webcomponent]")) {
    customElements.define(
      tpl.getAttribute("x-webcomponent"),
      class extends HTMLElement {
        connectedCallback() {
          const shadow = this.attachShadow({ mode: "open" });
          
          shadow.appendChild(tpl.content.cloneNode(true));
          
          Alpine.initTree(shadow);

        }
      },
    );
  }
});

</script>


<template x-webcomponent="my-dropdown">
  <div x-data="{ v: '...', w: '...' }">
      <!-- ERROR -->
      <input x-model.debounce='v' />
      <span x-html="v"></span>

      <!-- WORKS -->
      <input x-model='w' />
      <span x-html="w"></span>
  </div>
</template>
<main>
  <my-dropdown></my-dropdown>
</main>

It would be awesome if you had an idea what is going wrong here :)

All the best,
Sebastian