Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom elements cannot be used inside content scripts on extensions (v4 to v5 regression) #14739

Closed
ceifa opened this issue Dec 17, 2024 · 3 comments · Fixed by #14933
Closed

Comments

@ceifa
Copy link
Contributor

ceifa commented Dec 17, 2024

Describe the bug

After upgrading to svelte 5, I cannot use anymore custom elements that was already mounted on the page inside content scripts on my chrome extension.

The bug apparently it's because svelte 5 now rely on window.customElements, which is not available inside content scripts.

I think it is just a matter of adding a check if typeof window.customElements is undefined or not, to fallback to the previous solution that worked on v4.

Reproduction

  1. Create a page and add a custom element <foo-bar>
  2. Create a chrome extension for that page and mount a svelte component on it that uses the <foo-bar>

Logs

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'get')
    at set_custom_element_data
    at update_reaction
    at update_effect

System Info

System:
    OS: Windows 11 10.0.22635
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 2.23 GB / 15.92 GB
  Binaries:
    Node: 22.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 11.0.0 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.29 - ~\AppData\Roaming\npm\bun.CMD
  Browsers:
    Chrome: 131.0.6778.140
    Edge: Chromium (127.0.2651.8)
    Internet Explorer: 11.0.22621.3566

Severity

blocking an upgrade

@paoloricciuti
Copy link
Member

paoloricciuti commented Dec 17, 2024

If that's the problem you can just create a custom element passing true as the compile option or not passing a tag name instead of a tag name and it will not be registered for you

Here's an example

https://svelte.dev/playground/b508172a42f7499ca4d1b41693ae5bf9?version=5.14.2

@ceifa
Copy link
Contributor Author

ceifa commented Dec 17, 2024

If that's the problem you can just create a custom element passing true as the compile option or not passing a tag name instead of a tag name and it will not be registered for you

I'm not registering any elements using svelte. I'm trying to use a custom element already registered by the site I'm hooking into using manifest's content script.

@Conduitry
Copy link
Member

The dependency on the customElements global was introduced in #14508 as part of the improvements to the logic about when to set a property vs when to set an attribute. If we don't have that available to us, yeah, we could conceivably fall back to the value && typeof value === 'object' logic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants