Alpine Ajax doensn't seem to work within a shadowdom custom element

[dschissler]

With Alpine it is now possible to run two lines within the constructor or connectedCallback to start alpine on the shadowdom root without having to pierce the shadowdom. Alpine Ajax doesn't seem to work inside of Shadowdom.

For some reason when Alpine Ajax is registered as a plugin in Alpine.js it just doesn't work within shadow dom, but Alpine.js core does work.

Alpine.addScopeToNode(el, data)
Alpine.initTree(el)

HTMX can do do this as of 2.0.

HTMX.process(el)

For example, this can also be used to bring compartmentalized library (Alpine, HTMX) support to slots.

    Object.assign(prototype, {
      $initSlot(slot, data) {
        slot.addEventListener('slotchange', e => {
          for (const el of slot.assignedElements()) {
            this.$initElement(el, data)
          }
        })
      },  
      $initElement(el, data) {
        Alpine.addScopeToNode(el, data)
        Alpine.initTree(el)
      },
    })

    connectedCallback() {
        this.$initSlot(this.$('slot:not([name])'), {})
    }

[imacrayon]

Hey thanks for reporting this! It’s definitely something I want to support, I just don’t have much experience with the shadow DOM yet.

[dschissler]

I saw a discussion where someone (possibly you) was talking about breaking off Alpine Ajax into its own separate library. If there was ever a reason to stay on Alpine then it could be to hook into their initTree function. They might already be exposing some plugin hooks for it. Probably you're still assuming something global that is now more recently provided there.

Htmx also figured this out for version 2.