Defining Custom Elements The customElement() function allows you to author a web component, returning an ElementResult that has some helpful methods like define() and eject().

• ElementResult.define() is a little safer than customElements.define() because it first checks if the component was already defined, without throwing an error. It will, however, log a warning. There's no need to pass the element class since it already has that information, but you may pass ElementDefinitionOptions as the second argument if necessary. const MyElement = customElement(() => html`<slot></slot>`); MyElement.define('my-element');
• ElementResult.eject() is useful in case you need to access the underlying class for some reason; perhaps you want to extend it and/or set static properties. const MyElementClass = MyElement.eject(); class MyOtherElement extends MyElementClass { // ... }
• ElementResult.register() allows you to register the custom element with a registry. See Registries for more information. import { createRegistry, customElement, html } from 'thunderous'; // create a global custom element registry const registry = createRegistry(); const MyElement = customElement(() => { return html`<div>My Element</div>`; }); // register the custom element with the registry MyElement.register(registry);

These may also be chained together, like MyElement.register(registry).define('my-element').eject().