Wrap your component up as a custom element
JavaScript

README.md

preact-custom-element

Generate/register a custom element from a preact component.

Usage

Import CustomElement and call with your component and a tag name *:

import registerCustomElement from "preact-custom-element";

const Greeting = ({ name = "World" }) => (
    <p>Hello, {name}!</p>
);

registerCustomElement(Greeting, "x-greeting");

* Note: as per the Custom Elements specification, the tag name must contain a hyphen.

Use the new tag name in HTML, attribute keys and values will be passed in as props:

<x-greeting name="Billy Jo"></x-greeting>

Output:

<p>Hello, Billy Jo!</p>

Related

preact-shadow-dom