Web Components API Demo

Web Components is a suite of APIs allowing you to create reusable custom elements with encapsulated functionality using Custom Elements, Shadow DOM, and HTML Templates.

Web Components API: checking...

API Support

Custom Element Demo: <wails-card>

A custom card element with Shadow DOM encapsulation:

This is content inside a custom Web Component. The styling is encapsulated via Shadow DOM.

Different theme variant using the same component.

GreenBlueRedAdd Card

Custom Element Demo: <wails-counter>

A stateful counter component with reactive attributes:

HTML Template Demo

Using <template> for efficient cloning:

Template itemRemove Add from TemplateClear All

Slot Demo: <wails-panel>

Named slots for flexible content composition:

Panel Header

This is the default slot content - the main body of the panel.

Panel Footer - Created with Web Components

Event Log

Clear Log Component events will appear here...