@customElement
The @customElement decorator provides a concise way to register custom elements with the browser's Custom Elements registry. It is a declarative wrapper around the standard customElements.define() API.
Usage
import { RadiantElement, customElement } from '@ecopages/radiant';
@customElement('my-component')
export class MyComponent extends RadiantElement {
override connectedCallback() {
super.connectedCallback();
this.textContent = 'Hello from my-component!';
}
}Usage in HTML:
<my-component></my-component>Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
tagName | string | Yes | The custom element tag name. |
options | Autonomous custom-element options | No | Options for defining an autonomous custom element. |
Customized Built-in Elements
@customElement supports autonomous custom elements only. TypeScript excludes extends from its options, and passing a defined extends value at runtime throws a TypeError before registration. Extend RadiantElement to create a custom button or another autonomous element.