Home

Map Lab

Naming Conventions for DOM selection

data-component-name

used for identify the compoenent type

  data-component-name="drawer-container"

data-id

used to identify the unique instance

  data-id={id}

<section
  data-component-name="drawer-container" // lower-case dash version of component name
  data-id={id}
>
...
</section>

Example DOM query

[...document.querySelectorAll('[data-component-name="drawer-container"] [data-component-name="toggle"]')].map(e => e.click())