Element expansion
Custom element expansion allows you to write pure functions that return the contents of a custom element tag.
Dependency free
Enhance single-file components are designed to be used without needing to import dependencies. Dependency free components means less unplanned work and fewer breaking changes.
Naming convention
Per the spec, custom element tag names have two or more words separated by a dash (MDN docs). So your elements need to look like <foo-bar>
. <foo>
won’t work.
In your Enhance project the names of the files in your project’s app/elements
file correspond to the tag name of your custom element. Meaning my-header.mjs
will be authored as <my-header></my-header>
in your HTML page.
Expansion
Write this single-file component
export default function MyHeader({ html, state }) {
const { attrs } = state
const heading = attrs?.heading || 'Default'
return html`
<header>
<h1>${heading}</h1>
</header>
`
}
Author this HTML file
<my-header heading="Welcome"></my-header>
This is my index page
Inspect this output
<my-header heading="Welcome">
<header>
<h1>Welcome</h1>
</header>
</my-header>
This is my index page
Notice how the custom element is expanded with the output of your pure function. This sets your page up for progressive enhancement.