@coherent.js/web-components

Web Components integration for Coherent.js, enabling custom elements and Shadow DOM support.

Installation

npm install @coherent.js/web-components

Exports

Web Components integration

Modular Imports (Tree-Shakable)

• Web Components: @coherent.js/web-components

Example Usage

import { defineComponent } from '@coherent.js/web-components';

Note: All exports are tree-shakable. Import only what you need for optimal bundle size.

Usage

Define Custom Elements

import { defineComponent } from '@coherent.js/web-components';

const ButtonComponent = {
  button: {
    className: 'custom-button',
    text: 'Click me',
    onclick: 'console.log("Clicked!")'
  }
};

defineComponent('coherent-button', ButtonComponent);

Shadow DOM Components

import { defineComponent } from '@coherent.js/web-components';

defineComponent('coherent-card', {
  div: {
    className: 'card',
    children: [
      { h2: { text: 'Card Title' } },
      { p: { text: 'Card content goes here' } }
    ]
  }
}, { 
  shadowDOM: true,
  styles: '.card { padding: 1rem; border: 1px solid #ddd; }'
});

Features

• Custom element registration
• Shadow DOM encapsulation
• Style isolation
• Coherent.js component integration