On this pageFunctions
CustomElement
/**
* Define a typed binding for a custom element. The returned spec describes
* the element's properties and events with Schema, and exposes a
* `.withMessage<Message>()` factory that yields a typed `ElementBuilder` for
* the consumer's Message universe.
*
* Property changes diff across renders; declared `CustomEvent`s are
* converted to Messages by the runtime.
*/
<Tag extends string, Properties extends Record<string, Top>, Events extends Record<string, Top>>(config: CustomElementConfig<Tag, Properties, Events>): CustomElementSpec<Tag, Properties, Events>/**
* The typed builder for a given spec and Message universe. Equivalent to
* the value `Spec.withMessage<Message>()` returns, expressed as a type
* consumers can name without reaching for `ReturnType<typeof ...>`.
*/
type Builder = Spec extends CustomElementSpec<string, infer Properties, infer Events>
? ElementBuilder<Message, Properties, Events>
: never/**
* Typed call site for a defined custom element. The element constructor
* itself is callable; each declared property gets a PascalCase factory
* method, and each declared event gets an `On{PascalCase}` factory method.
*/
type ElementBuilder = (attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html & PropertyFactories<Message, Properties> & EventFactories<Message, Events>/** Configuration accepted by `CustomElement.define`. */
interface CustomElementConfig {
events: Events
properties: Properties
tag: Tag
}/**
* A defined custom element, untyped on Message at definition time so the
* spec can be exported and shared across modules. Call `.withMessage<Message>()`
* inside a view module to mint a typed `ElementBuilder` bound to the
* consumer's Message universe.
*/
interface CustomElementSpec {
events: Events
properties: Properties
tag: Tag
withMessage: () => ElementBuilder<Message, Properties, Events>
}