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

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 -->

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

Visit Enhance on GitHub.
Join our Discord server to chat about development and get help from the community.