Docs · @astro-dx/elements

@astro-dx/elements

dx-if, dx-show, dx-for as custom elements — self-documenting, no attribute pollution.

Setup

typescript

import { register } from '@astro-dx/elements';
import '@astro-dx/elements'; // registers custom elements

import { signal } from '@astro-dx/core';

const isOpen = signal(false);
const items  = signal<{ name: string; price: number }[]>([]);

register({ isOpen, items });

dx-show

html

<dx-show signal="isOpen">
  <p>Visible when isOpen is truthy. Stays in DOM.</p>
</dx-show>

dx-if

html

<dx-if signal="isOpen">
  <div>Created when truthy, destroyed when falsy.</div>
</dx-if>

dx-for

html

<ul>
  <dx-for signal="items">
    <li>
      <span dx-text="name"></span>
      <span dx-text="price"></span>
    </li>
  </dx-for>
</ul>

Use @astro-dx/attributes if you prefer decorating existing elements rather than wrapping with custom element tags.