Support `extends` key in custom elements (aka built-in custom elements) in Salesforce Lightning platform with Lightning Web Security enabled

[gjyalpha]

Is your feature request related to a problem? Please describe.
It seems the LWC solution monkey-patches the customElements.define() and some other functions to get LWC working. But it doesn't expose a way to for regular Web Component solutions to use all the native Web Components API.

Describe the solution you'd like
LWC should provides a way for regular Web Component solutions to get access to the native Web Components APIs and just keep those regular Web Components working.

Describe alternatives you've considered
Or LWC could ensure the monkey-patched customElements APIs are fully compatible with the native customElements API. We ran into this NotSupportedError: "extends" key in customElements.define() options is not supported error, but couldn't figure out a way to workaround it.

Additional context
It seems #2983 is a related issue, but it got closed without a clear description what alternatives are available to workaround this issue.

[nolanlawson]

@gjyalpha Thanks for reporting. Are you running into this issue on the Salesforce Lightning platform? The issue you link to is actually for an experiment that never shipped, and the error message ("extends" key in customElements.define() options is not supported) seems to come from Lightning Web Security.

FWIW extends is also not supported by Safari/WebKit.

LWC provides a way for regular Web Component solutions to get access to the native Web Components APIs and just keep those regular Web Components working.

Is there a particular functionality other than extends that is missing? Or is this issue just about the monkey-patching in general?

[gjyalpha]

@nolanlawson Thanks for your quick response!

Are you running into this issue on the Salesforce Lightning platform?

It's our customer's Salesforce instance running on the Lightening platform, which runs into the issue. Our regular Web Components solution started failing after our customer's SF instance got upgraded to the Summer '23 SF release, i.e., the error NotSupportedError: "extends" key in customElements.define() options is not supported.

Our own testing SF instance is still on Spring '23 SF release, and we can't reproduce this issue. So we suspect some change in the Summer '23 SF release broke this.

FWIW extends is also WebKit/standards-positions#97.

And our customer only uses Chrome and our Chrome Extension (which injects Web Components), so it's not really a concern for our customer.

Is there a particular functionality other than extends that is missing? Or is this issue just about the monkey-patching in general?

Since we can't reproduce this issue yet in our own SF test instance, I can tell what's missing. Will take a deeper look once I get access to a SF instance that we could reproduce this.

And thanks for the link to the Lightning Web Security, I'll take a look how it plays a role in this issue.

One more question, @nolanlawson , do you know which version of LWC was included in the current Summer '23 SF release?

[gjyalpha]

I also tried in the LWS console: https://developer.salesforce.com/docs/component-library/tools/lws-console#[object%20Object]

with this code:

class HelloWorld extends HTMLDivElement {

  // connect component
  connectedCallback() {
    this.textContent = 'Hello World!';
  }

}

// 1
customElements.define('hello-world', HelloWorld, {extends: 'div'});

It seems I no longer get that NotSupportedError: "extends" key in customElements.define() options is not supported error if LWS is disabled.

PS: one caveat of the LWS Console page is that you need to toggle LWS enable/disable option as the first thing on the page. And you need to refresh the page if you want to change it. Otherwise, enable it first then disable it won't really disable it.

[nolanlawson]

@gjyalpha Thanks for the details! Yes, this looks like an issue in Lightning Web Security. I will pass this along to the LWS team.

As a short-term fix, you may be able to disable LWS or use a built-in custom elements polyfill (note I have not tried this particular polyfill and cannot vouch for it).

[nolanlawson]

@gjyalpha After reviewing this issue, I'd recommend opening a Salesforce case – that would be the best way to get this prioritized.

[gjyalpha]

Thank you @nolanlawson ! I'll open a Salesforce case to follow up.

One more question, our customer confirmed they have been always having the Lightning Web Security feature disabled. But somehow they still got the NotSupportedError: "extends" key in customElements.define() options is not supported error error. Maybe the Salesforce prod works differently compared to the LWS Console.

Do you happen to know how Lightning Web Security works internally? Is there a possibility that disable LWS in Salesforce admin only disable the core function of the LWS, but the customElements.define() API is still monkey-patched (actually proxied) by LWS?

[nolanlawson]

@gjyalpha I'm not an expert on Lightning Web Security, but I know customElements.define() is not supported in Locker at all... So if you disable LWS, I assume you would get Locker, meaning customElements.define() would not be available at all. I'd follow up in the Salesforce case to confirm the details though.

[gjyalpha]

OK, will do. Thanks again, @nolanlawson !