Instance ID

instanceID is a unique identifier that is generated per Custom Element instance. This enables you to differentiate between multiple instances of the same element on a page. It can also be useful when using a string based diffing library like Morphdom which keys on unique identifiers to know when to update versus replace an element.

export default function MyCard({ html, state }) {
  const { attrs={}, instanceID='' } = state
  const { content='', heading='' } = attrs

  return html`
<figure id="figure-${instanceID}">
  <h2>${heading}</h2>
  <p>${content}</p>
</figure>
  `
}
ℹ️
Pro tip: As in the example above, prefix the id with the element name in order to use the id with multiple child elements.

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!