Registries The createRegistry() function is used to create a registry for custom elements, which returns a RegistryResult with some helpful methods and properties. These registries may be global or scoped. Global registries allow you to track how custom elements are defined by the consumers of your code.

• RegistryResult.define() is functionally equivalent to the native customElements.define() method, with the added benefits of Thunderous registries. In case you want to delegate custom element definitions to the consumer of your library, it's better to use the ElementResult.register() method, which defers tag name definitions until ElementResult.define() is called. Read more about the ElementResult type. import { MyElement } from './my-element'; import { createRegistry, customElement, html } from 'thunderous'; const registry = createRegistry(); // You could define the element directly like so: registry.define('my-element', MyElement); // ...or you could defer the definition until later: MyElement.register(registry).define('my-element');
• RegistryResult.getTagName() returns the tag name of the custom element associated with the provided class. This can be useful when you need to select a custom element whose tag name is variable. import { createRegistry, customElement, html } from 'thunderous'; import { MyElement } from './my-element'; import { registry } from './registry'; const MyOtherElement = customElement(({ connectedCallback }) => { connectedCallback(() => { // get the defined tag name of the custom element const tagName = registry.getTagName(MyElement); console.log(tagName); // MY-ELEMENT }); return html`<div>My Other Element</div>`; }); // this may be defined in the consumer's project MyElement.define('my-element');
• RegistryResult.getAllTagNames() returns an array of all the tag names in the registry.
• RegistryResult.eject() returns the native CustomElementRegistry instance that the registry is using. If the registry was not scoped, this will return the global customElements object.
• RegistryResult.scoped is a boolean that indicates whether the registry is scoped. Scoped registries are not yet supported in all browsers. To use this feature today, you must install the scoped custom elements polyfill as a peer dependency. Please note this polyfill script must only be run on the client; it will throw an error on the server. The simplest way to guarantee this is to add the script to your HTML file. <script src="https://unpkg.com/@webcomponents/scoped-custom-element-registry@0.0.10/scoped-custom-element-registry.min.js"></script> To create a scoped registry, pass scoped: true to the arguments of createRegistry(). This allows you to support the proposed scoped custom element registries , which define custom elements within the current shadow root only. import { ScopedElement } from './scoped-element'; import { createRegistry, customElement, html } from 'thunderous'; // create a scoped custom element registry const registry = createRegistry({ scoped: true }); console.log(registry.scoped); // true // define a custom element in the registry registry.define('scoped-element', ScopedElement); // use the element in another element's shadow root const ParentElement = customElement(() => { return html`<scoped-element></scoped-element>`; }, { // pass the registry to the shadow root options shadowRootOptions: { registry }, });