Wrap Preact components as standards-compliant custom elements for use in any HTML environment.
preact-custom-element is a library that converts Preact components into native custom elements, allowing them to be used as standard HTML tags. It solves the problem of integrating Preact components into non-Preact environments, such as static HTML, other frameworks, or CMS platforms, by leveraging the browser's built-in custom elements API.
Preact developers who need to embed their components into vanilla HTML, other JavaScript frameworks, or server-rendered pages without requiring a full Preact runtime.
Developers choose preact-custom-element for its strict adherence to the Custom Elements v1 spec, minimal footprint, and seamless integration with Preact's component model, offering a standards-based way to reuse components across diverse web environments.
Wrap your component up as a custom element
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Implements Custom Elements v1 spec strictly, providing a lightweight way to embed Preact components as native HTML elements without extra overhead, as emphasized in the philosophy.
A simple register() call with optional static properties like tagName and observedAttributes allows quick setup, reducing boilerplate, as shown in usage examples.
Opt-in shadow DOM support with configurable mode and slot forwarding enables style encapsulation and structured child distribution, detailed in the options parameter.
Automatically infers observed attributes from propTypes if not specified, simplifying attribute management for typed components, as highlighted in the README.
Only works with Preact, making it unsuitable for projects using other frameworks like React or Vue without Preact integration, limiting broader adoption.
Relies on Custom Elements v1, so it doesn't support older browsers without additional polyfills, and versions <3.0.0 use the abandoned v0 spec, complicating upgrades.
Setting up observed attributes and shadow DOM options can be verbose, requiring explicit lists or propTypes, which might be cumbersome for simple or dynamic components.