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])'), {})
    }