Score 100% on Custom Elements Everywhere benchmark

[nolanlawson]

The Custom Elements Everywhere benchmark is an industry-standard tool to measure the degree that a web framework supports custom elements (web components).

Now that we have lwc:external, we should be able to score 100% on this test. There are two pieces of work here:

1. Open a PR on that project to add LWC as a tested framework.
2. Fix bugs where we don't score 100% on the test. Off the top of my head, we will need to support declarative event names in formats like camelCase and kebab-case, not just lowercase.

[ekashida]

#1904 for historical context

[ekashida]

Sorry, wrong button!

[git2gus[bot]]

This issue has been linked to a new work item: W-13831267

[nolanlawson]

Related: https://github.com/salesforce/lwc/issues/1811

We discussed this today in dev sync, @ekashida and I agree that it would make sense to support

<x-foo onfoo-bar>
<x-foo onFooBar>

... i.e., event names in kebab-case or pascal/camel/upper-case, in order to score 100% on Custom Elements Everywhere. Even if LWC components do not support this format, other web component frameworks may dispatch events in this format, and for maximum interoperability, LWC should be able to declaratively handle those events.

We can solve this purely in the compiler level – when the VNode is sent to the client, it already has the event as the key in an object, so it's trivial to support hyphens/uppercase letters.

The question is whether to support this only for lwc:external or all components. For LWC components, supporting this would mean relaxing existing compile-time and runtime tests that validate that event names are always lowercase and don't contain hyphens.

We also need #3602 to be merged first since we will probably have to grab the raw string from parse5.