Elements

Elements are the reusable building blocks of your Enhance application. They are pure functions authored as single-file components and can be static or update dynamically to state changes. Elements live in the app/elements/ folder in the Enhance starter project.

Naming

The file name of your element will be the tag name you author with. Meaning app/elements/my-message.mjs will be authored as <my-message></my-message> in your HTML page. Enhance elements are HTML custom elements, so they require two or more words separated by a dash.

app/elements/my-message → <my-message></my-message>
app/elements/my-link → <my-link></my-link>

When a project grows to include more elements than can comfortably fit in a single folder, they can be divided into sub-directories inside app/elements/. The folder name becomes part of the custom element tag name:

app/elements/blog/comment → <blog-comment></blog-comment>
app/elements/blog/comment-form → <blog-comment-form></blog-comment-form>

html

Elements are pure functions meaning given the same input they return the same output every single time. Your element function will be passed an arguments object containing an html render function that is used to expand nested custom elements.

export default function MyHeader({ html }) {
  return html`
    <header>
      <my-link href="/about"></my-link>
    </header>
  `
}

state

Your element function is also passed a state object in the arguments object. This state object is comprised of attrs; an object of key value pairs representing the attributes added to your custom element tag and store; an object containing application state.

export default function MyHeader({ html, state }) {
  const { attrs, store } = state
  const { heading = 'Default' } = attrs
  const href = store.aboutPath

  return html`
    <header>
      <h1>
        ${heading}
      </h1>
      <my-link href="${href}"></my-link>
    </header>
  `
}