Typed Custom Elements

Typed Custom Elements is a collection of TypeScript types to help you author type-safe Web Components, with proper type checking for custom elements, their constructors, and the custom elements registry.

Features

• ✅ Typed custom element class definitions
• ✅ Typed static properties and lifecycle methods
• ✅ Typed custom element constructors
• ✅ Type-safe interaction with the Custom Elements Registry
• ✅ Zero dependencies
• ✅ ESM compatible

👉 Try it now in StackBlitz

Installation

npm install typed-custom-elements

Usage

Basic Custom Elements

importtype{CustomElement}from"typed-custom-elements"classMyElementextendsHTMLElementimplementsCustomElement{// type safety and code completion for static propertes, lifecycle methods, etc.staticformAssociated=truestaticobservedAttributes=["name"]attributeChangedCallback(name: string,oldValue: string|null,newValue: string|null){// type-safe callback handling}}

Custom Element Constructors

importtype{CustomElementConstructor}from"typed-custom-elements"constMyElementConstructor: CustomElementConstructor=classextendsHTMLElement{// type safety and code completion for static propertes, lifecycle methods, etc.}

Custom Elements Registry

importtype{CustomElementRegistry}from"typed-custom-elements"declareconstcustomElements: CustomElementRegistry// type-safe custom element registrationcustomElements.define('my-element',classextendsHTMLElement{// type safety, code completion, you get the point})

Why Use Typed Custom Elements?

Working with Web Components in TypeScript often means relying on implicit or loosely typed structures. This package brings clarity and confidence to your component authoring by enforcing:

• Proper typing for lifecycle callbacks.
• Static property inference (formAssociated, observedAttributes).
• Safer registration and instantiation via constructors and registries.

License

This project is licensed under the MIT No Attribution License.