Attributes

Attributes are the initial way you pass data to your custom elements. The Web Component spec uses attributes extensively as a way to know when to update your element. Enhance passes your Custom Elements attributes as an object of key value pairs to your pure function at render time.

Author attributes

<my-message message="Howdy!"></my-message>

Access attrs

export default function MyMessage({ html, state }) {
  const { attrs } = state
  const { message = '' } = attrs

  return html`<p>${message}</p>`
}

Naming Attributes

Generally, HTML attributes are lowercase. We recommend following suit for attributes for your custom elements. However, kebab-case and snake_case are also valid. Unfortunately, camelCase is not recommended as the web component lifecycle event attributeChangedCallback doesn’t fire for camelCase attributes.

Handling Booleans

Boolean attributes are not the most straight forward attributes to use. There are a handful of extremely necessary boolean attributes that you find yourself needing for any app such as required, disabled, autofocus etc. The spec states that the existence of a boolean attribute means true and the lack of the attribute means false which is contrary to how most frameworks instruct users to interact with boolean attributes. Remember attributes can only be strings.

Test setting the disabled attribute in your browser.

<!-- TRUE -->
<button disabled>Disabled?</button>

<!-- TRUE -->
<button disabled="">Disabled?</button>

<!-- TRUE -->
<button disabled="false">Disabled?</button>

<!-- FALSE -->
<button>Disabled?</button>

Booleans handled correctly

export default function MyButton({ html, state }) {
  const { attrs } = state
  const disabled = Object.keys(attrs).includes('disabled')
    ? 'disabled'
    : ''

  return html`<button ${disabled}>Disabled?</button>`
}