Getting Started

Welcome to Tan Compose! Build reusable web components with declarative syntax.

<h3>Installation
npm install tan-composecode>

Basic Usage

import { describe, build } from 'tan-compose'; const button = describe({ tag: 'button', template: 'Click me!', styles: { padding: '10px 20px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }, action: () => alert('Button clicked!') }); build('my-button', button);

API Reference

3>describe(options)

Creates a component description object.

>Parameters:

  • <
code>tag - HTML element type
  • template - Inner HTML content
  • styles - CSS styles object
  • theme - CSS custom properties
  • children - Nested components>
  • action - Click handler
  • attributes> - HTML attributes
  • beforeMount/afterMount - Lifecycle hooks
  • >emit - Custom events

    • build(tagName, description)>

    Registers a custom element.

    Parameters:

    • tagName - Custom element name
    >
  • description - Component description

    • Examples<

    h2>

    See the examples page for interactive demos.