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.

case attribute JS access attributeChangedCallback
lower imagewidth comp.imagewidth
kebab image-width comp['image-width']
snake image_width comp.image_width
camel imageWidth comp.imageWidth

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>`
}
🏪

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.
Mastodon
Follow Enhance in the Fediverse. We're huge fans of the IndieWeb!