[scoped-custom-element-registry] Broken on Safari 18.4

[MariusVatasoiu]

Description

Error thrown on Safari 18.4 at this line:

const shadowRoot = nativeAttachShadow.apply(this, arguments);

Example

Steps to reproduce

import "https://esm.sh/@webcomponents/scoped-custom-element-registry@0.0.9"
import { LitElement, html } from "https://esm.sh/lit"
import { ScopedElementsMixin } from "https://esm.sh/@open-wc/scoped-elements/html-element.js"

class Child extends LitElement {
  render() {
    return html`child`
  }
}

class MyComponent extends ScopedElementsMixin(LitElement) {
  static scopedElements = {
    "my-child": Child,
  }
  render() {
    return html`<my-child></my-child>`
  }
}

window.customElements.define("my-component", MyComponent)

<my-component></my-component>

Repro: playground

Expected behavior

No error is thrown

Actual behavior

Error is thrown

Version

@webcomponents/scoped-custom-element-registry@0.0.9

Browsers affected

• Chrome
• Firefox
• Edge
• Safari 18.4 (beta)
• IE 11

[MariusVatasoiu]

I've tested the code from master branch and the problem seems to be solved. If I'm not wrong, this #581 PR from @sorvell solves the issue, so technically we just need a new release.

This WebKit/WebKit#39865 is the PR from Safari.

[justinfagnani]

@rniwa @annevk No one's filed a WebKit bug yet, but I wanted to tag you here as a heads up.

[annevk]

Does someone have a more minimal test case? As far as I know Scoped Custom Element Registries is not enabled in 18.4 so I wonder why that would be the cause.

[MariusVatasoiu]

@annevk I left a repro in the first post:

https://jsfiddle.net/MariusVatasoiu/ahe4gkfs/

[annevk]

I saw that, I meant without all the library code.

[sorvell]

Repro fails on Safari 18.4 beta: https://lit.dev/playground/#gist=86fda1412a8cde894575da93db30561f

Putting registry in the shadowRoot options appears to be bad.

[justinfagnani]

I fixed the issue on this end, and it'll be out with the next release shortly.

But @annevk the version of the polyfill with the problem is out in production. There will be broken sites, even after we release a fixed version here.

[rniwa]

Looks like this broke https://www.carmax.com/cars/toyota :(

[justinfagnani]

@rniwa We published the fix to npm. Do you have a contact at CarMax in case they need guidance on upgrading?

[annevk]

The issue you fixed here we fixed in https://bugs.webkit.org/show_bug.cgi?id=286787 (I guess that hasn't made it yet into release) and is not the one that impacts CarMax I think.