Mangled Alpine.js attributes when used within slot

[destos]

I'm trying to add some apline code to make quick shortcuts for links on pages but markup is being mangled.

My current template looks like this with a component with slots:

    <c-card-product-type :product_type="product_type">
      <c-slot name="actions">
        <kbd class="kbd kbd-sm">{{ product_type.serial_code|lower }}</kbd>
        <a
          x-data
          class="btn btn-primary"
          href="{% url 'product_type_index' product_type.slug %}"
          @keydown.window.{{ product_type.serial_code|lower }}.prevent="window.location.href = $el.href"
        >View</a>
      </c-slot>
    </c-card-product-type>

The output looks like this, the attributes on the anchor link are mangled.

<div class="my-12 grid gap-4 divide-y md:grid-cols-2 md:divide-y-0 lg:grid-cols-3">
<div class="card bg-white shadow-xl g-4">
<div class="card-body">
<h2 class="card-title text-4xl font-light tracking-wide text-slate-500">V</h2>
<p></p>
<div class="card-actions justify-end">
<kbd class="kbd kbd-sm">v</kbd>
<a .window.prevent="window.location.href = $el.href" @keyup.vclass="btn btn-primary" href="/v/" x-data>View</a>
</div>
</div>
</div>

Any ideas? Moving the anchor out of the slot does fix the issue. So I assume something is going on with the way slots work.

[wrabit]

@destos local tests outputs this as expected.

• What version of cotton are you using?
• Where does @keyup.vclass come from?

[destos]

@wrabit, I was on 1.0.8, updated to the latest and it is now working. I had just installed it a few weeks ago to try out and didn't think to update it, ha!