Unique IDs within web components

[kevinrodrigues]

The Problem

The Shadow DOM provides encapsulation for web components, allowing them to have their own scoped DOM subtree separate from the main document's DOM. This means that elements within the Shadow DOM can technically have the same IDs as elements outside or within other encapsulated Shadow DOMs without causing conflicts in the global scope.

However, despite this encapsulation, we've encountered warnings and issues related to duplicate IDs within Storybook. While technically the IDs within the Shadow DOM are scoped, ensuring unique IDs within our components is probably the safest approach to prevent any potential conflicts or issues, especially in scenarios where multiple instances of a component are used on the same page.

Potential solution (see Note as I'd like to try and avoid this)

In the context of Lit web components, if the same component is rendered multiple times on a page and each instance of the component includes elements with the same ID attribute, it could potentially lead to issues with document structure and accessibility.

While technically, within the Shadow DOM, elements with the same ID can coexist without causing global conflicts, it seems generally a best practice to ensure that IDs are unique within a given document to avoid unintended behaviour and to comply with web standards and accessibility guidelines.

To maintain uniqueness, we could consider dynamically generating IDs for elements within the component based on some unique identifier associated with each instance of the component. A library like this can help. This could be achieved using techniques such as concatenating a component-specific prefix with a unique identifier or generating random IDs programmatically.

import { LitElement, html, css } from 'lit';

class MyComponent extends LitElement {
  render() {
    // Generate a unique ID based on a component-specific prefix and a unique identifier
    const uniqueId = `my-component-${this.uniqueIdentifier}`;

    return html`
      <div id="${uniqueId}">
        <!-- Your component content here -->
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

Re-rendering Lit components

From my understanding, in Lit, when a component re-renders, the template is re-evaluated, but the DOM elements are not necessarily recreated from scratch. This means that DOM elements are not recreated from scratch during every render cycle, but rather updated as needed. If we're planning on using dynamic IDs based on some unique identifier helper associated with each instance of the component, these IDs will remain consistent across re-renders unless we explicitly change them within our component's logic.

Note:

I've asked the Lit team about using a single ID (without a unique name) as I'd prefer to avoid adding a UID to our components if we can avoid it as I don't believe we actually need it. From my understanding and reading here WCs are generally scoped to their own DOMs (Shadow DOM) as opposed to the light DOM (The main parent DOM). In the context of linking elements together for accessibility, the screen reader should in theory read within its own context.

Further reading:

• https://lit.dev/docs/components/shadow-dom/
• https://web.dev/articles/shadowdom-v1

Discord threads

• Lit team chat
• General chat

[kevinrodrigues]

Sorry for the delay on this. Here's the outcome for anyone interested:

TLDR; Web components do not need unique IDs because they are scoped to their shadow DOMs and therefore multiple IDs with the same name would not interfere with the main DOM as they do not leak out into the light DOM. Even though IDs should still be unique within their scope, using shadow DOM means that multiple elements can have the same ID as long as they are within different shadow DOMs. This encapsulation ensures that these IDs do not interfere with each other or with the main document (light DOM).

Shadow DOM Scoping
When you create a web component with a shadow DOM, the elements inside the shadow DOM are scoped and encapsulated. This means they are isolated from the rest of the document. Styles and IDs within the shadow DOM do not affect or clash with the global document, and vice versa.

IDs within Shadow DOM
IDs within a shadow DOM are unique to that particular shadow DOM. This isolation ensures that if you have multiple instances of the same web component on a page, the IDs inside each shadow DOM won't clash with each other or with IDs in the global document. More reading here.

What does this mean for us?
We don't need to use any UID libraries like we've done in the past within our component library (which is good). There are some specific warnings and errors especially in Storybook, Chrome & WTR accessibility tests which from my investigation are incorrect warnings and nothing to be worried about.

Conclusion
Web components do not need unique IDs because elements inside a shadow DOM are scoped and isolated (We should still make sure we only use one ID that is unique within a single shadow DOM just like we do in the normal DOM, this should still be followed as normal).
IDs within a shadow DOM are only unique within that shadow DOM.
Multiple instances of a web component can exist on a page without ID conflicts, thanks to the encapsulation provided by the shadow DOM.

[fernandofranca]

Thanks for investigating this!