Ensure unique `id` attributes in shadow DOM elements

[daneah]

[!NOTE]

This should likely become an architecture decision record.

The problem

Pharos uses the shadow DOM in closed mode, which in theory isolates each component instance's DOM from other instances, such that a nested DOM element in one component instance can have an id attribute that is identical to a corresponding DOM element in another component instance.

Unfortunately, although they support shadow DOM in general, several ecosystem tools expect id attributes to be unique on a given page even if elements are contained in component instances' shadow DOMs. This leads to the inability to distinguish elements from one another in events and so on that don't take into account what the host element is.

The solution

1. Reduce usage of id attributes within Pharos to the minimal necessary
2. Where possible, update usage of id attributes to be programmatically calculated and unique, such that no two elements nested within separate Pharos component instances share an id attribute.

Alternatives considered

We've tried waiting for some of the ecosystem tooling to catch up, but it ultimately has not moved all that much.

Additional information

This might have the added benefit that unit tests here, and tests within consumers, will come to test Pharos using testing-library-like selection methods instead of relying on id attributes, which is generally considered a poor practice when testing from a user perspective.