@webbloqs/proxies

React components as custom elements with shadow DOM, SSR, and form association.

Overview

@webbloqs/proxies wraps React components in web components using Lit. The wrapped components render inside shadow roots and can participate in HTML forms.

Core capabilities:

• Property/attribute mapping with type conversion
• Shadow DOM encapsulation with configurable style modes
• Server-side rendering with hydration
• Form-Associated Custom Elements (FACE) for form integration

Quick Start

import { CustomElement } from "@webbloqs/proxies";
import { MyButton } from "./MyButton";

const MyButtonElement = CustomElement({
  reactComponent: MyButton,
  properties: {
    label: String,
    disabled: Boolean,
  },
});

customElements.define("my-button", MyButtonElement);

<my-button label="Click me" disabled></my-button>

API Surface

• CustomElement - Factory function that creates a custom element class wrapping a React component
• defineElement - Registers an element with the global registry (supports lazy loading)

Documentation

• Form-Associated Custom Elements - form integration, validation, form data
• CustomElement guide (coming soon) - properties, SSR, styling, exposed mode

Installation

npm install @webbloqs/proxies