@astro-dx/elements

Custom elements

dx-if, dx-show, dx-for as custom elements — explicit, self-documenting markup.

dx-show, dx-if, dx-for — ShopService

You have items in your cart

Modal is open

Add product

Clear

Code example

typescript

import { register } from "@astro-dx/elements";
import "@astro-dx/elements";

register({
  hasItems: ShopService.hasItems,
  isModalOpen: ShopService.isModalOpen,
  cartItems: ShopService.cartItems,
});

// In template:
// <dx-show signal="hasItems">...</dx-show>
// <dx-if signal="isModalOpen">...</dx-if>
// <dx-for signal="cartItems" key="id">...</dx-for>