Source code

Web Components

Reusable custom elements registered from src/client/webComponents/. Each component is a CustomComponent subclass defined with a static key (e.g. lta-success-screen) and registered in webComponents/index.js.

Source: src/client/webComponents/ · Styles live under src/styles/7-components/ · Demo pages document attributes, events, and live usage.

How it works

  1. Define — Extend CustomComponent, set static key, and implement render / lifecycle hooks.
  2. Register — Export from src/client/webComponents/index.js so customElements.define runs on page load.
  3. Use — Drop the custom tag in templates or inject HTML; pass configuration via attributes and light-DOM children.
  4. Document — Add an 11ty demo under design/web-components/ tagged design-system-web-component with wcGroup / wcOrder so it appears in the right Playgrounds group and sidebar.

Playgrounds

Live demos for every registered web component — attributes, events, and sample markup.