Skip to main content
The @customElement decorator registers your LitElement class as a custom element by calling customElements.define() under the hood.

​
Import

import {customElement} from 'lit/decorators.js';

​
Signature

customElement(tagName: string): CustomElementDecorator
​
tagName
string
required
The tag name to register the element under. Must contain a hyphen and follow the valid custom element name rules.

​
Usage

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`<p>Hello from my-element</p>`;
  }
}
Once registered, you can use the element in HTML: 
<my-element></my-element>

​
Without decorators

If you prefer not to use decorators, call customElements.define() directly after your class definition: 
import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`<p>Hello from my-element</p>`;
  }
}

customElements.define('my-element', MyElement);

​
Notes

You must register a custom element before using it in the DOM. If you use @customElement, registration happens automatically when the module is imported. Make sure to import the module before referencing the tag in HTML.
Each tag name can only be registered once. Attempting to register the same tag name twice throws a DOMException.