Skip to content

Alpine.js Toolkit

@ailuracode · Interactive plugin demos

Child

asChild-style directive that merges wrapper attributes onto the first child.

Directivex-child
Read Documentation@ailuracode/alpine-child
Childx-child
asChild-style directive that merges wrapper attributes onto the first child.

asChild-style link

Wrapper classes and click behavior land on the anchor; the <span> is removed.

Ir a docs

Clicks:

Class merge

Inspect the button — child classes are kept and wrapper tokens are appended.

Style merge

aria-* and data-*

Child aria-label and data-track win; missing data-component is copied.

Button with parent scope

x-child.replace

Known limitations

  • Only the first element child is kept — extra siblings are discarded with the wrapper.
  • Runtime addEventListener on the wrapper is not transferred.
  • Do not use on x-for / x-if wrappers.

Package: @ailuracode/alpine-child