Custom elements, known as lit elements, can be created using any browser API for generating HTML. This allows you to not only create your element but also nest it within another element. These custom elements behave similarly to native browser elements by default and can be enhanced with additional tooling if desired.
There are various methods for creating these elements, each with its own tradeoffs in terms of typing. The recommended approach is to use the second example provided below. Typing can be optionally enforced utilizing tools like lit-plugin.
Creating Lit Elements (and any HTML elements)
Using Static HTML - Declarative API
<!-- Element in an HTML context (such as an HTML file, markdown, or an HTML tag function) -->
<flow-identification></flow-identification>
<!-- Nested Example -->
<div><flow-identification></flow-identification></div>
Alternatively, you can utilize Lit's html tag function:
const template = html`<div><flow-identification></flow-identification></div>`;
If needed, types can be introduced through tools like the lit-plugin. More information can be found here:
Using Imperative DOM APIs
// `el` will have correct typings in TypeScript when present on HTMLElementTagNameMap
const el = document.createElement('flow-identification');
document.body.append(el); // Example of nesting within `body` element.
It's worth noting that your FlowIdentification element will be typed if the specified code snippet is added to your TypeScript source code. Refer to this documentation link for more details: [documentation link]
declare global {
interface HTMLElementTagNameMap {
"flow-identification": FlowIdentification;
}
}
You can also utilize innerHTML, although it won't provide typing:
document.body.innerHTML = "<div><flow-identification></flow-identification></div>";
As previously mentioned, constructing a custom element through its constructor is possible, but the element must already be defined in the custom elements registry. Reference available here: [reference]
const el = new FlowIdentification();