[Feat]: Provide devmode help on custom element registration conflicts

[hunterloftis]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

all

Description of the requested feature

Before we call customElementRegistry.define, which can potentially trigger an exception like:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "sp-icon-alert" has already been used with this registry

We should check to see if a given element is already defined. If so, we should output help text that includes:

1. An explanation of what's happening (one global registry, two versions of the same tag trying to register)
2. A suggestion why (usually, multiple versions installed via transitive dependencies in package.json)
3. A link to a documentation URL that walks users through resolving the issue in common cases (yarn why etc).

Mockups or screenshots

No response

Implementation notes or ideas

customElementRegistry.get('sp-foo')

If we're able to retrieve package versions, we could provide even more helpful output ("Trying to register sp-foo 1.2.3 but sp-foo 1.1.1 is already registered"). This would make spotting the issue in tools like yarn why easier.

[Westbrook]

fixed in #3171