[Carbon Web Components]: Investigation of a stable selector model for components

[jeffchew]

The problem

This is in tandem with the following issue opened for Carbon React:
#13300

Access to the DOM currently is based on classes and other means, which ultimately may have things like unit tests, e2e tests, a/b tests, personalization campaigns, etc, become brittle when UI code changes occur.

The solution

The Carbon for IBM.com team has adopted early on a stable selector approach, which has since been heavily adopted as a model even outside of the Carbon for IBM.com library by the digital insights team in Marketing.

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/stable-selectors.md

This issue (which may ultimately become an epic) will explore a way of adding stable selector identifiers within the code base for the benefit of testing and campaigns.

Application/website

Head of Engineering, Carbon Design System

Business priority

Medium Priority = upcoming release but is not pressing

What time frame would this ideally be needed by (if applicable)

This should hopefully be something added into 2.x of Carbon Web Components

Examples

Carbon for IBM.com storybooks:

Web Components:
https://www.ibm.com/standards/carbon/web-componensts

React:
https://www.ibm.com/standards/carbon/react

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[stale]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[kennylam]

React effort tracked in #9648.