@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!';
	}
}Copy

Usage in HTML:

<my-component></my-component>Copy

Parameters

Host Attributes

hostAttributes gives every instance fixed attributes, such as an ARIA landmark role:

@customElement('app-sidebar', { hostAttributes: { role: 'complementary' } })
export class AppSidebar extends RadiantElement {}Copy

• Server rendering writes them while it prepares the host, so the server output carries them before any script runs.
• In the browser they are written at the start of every connect, before onConnected().
• An attribute the author already wrote is kept: <app-sidebar role="navigation"> stays a navigation landmark.
• A subclass inherits its base class's attributes, and its own hostAttributes override them by name.
• Only RadiantElement hosts apply them. Use @bindTo or @onUpdated for attributes that depend on state.

The custom elements specification forbids adding attributes in the constructor, which is why the attributes wait for connect or server preparation.

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.

Learn More

• Naming Rules & Best Practices
• RadiantElement