ungap/custom-elements

Safari Error

Closed this issue · 5 comments

davidbwaters commented

This is the same issue that was closed for not having enough info, so I will try and do better. macOS Big Sur Beta 11.1.

I still get it on the live version, here in Safari 14.0.2.
It doesn't seem to break anything but IDK how much it's needed in the latest Safari Stable, besides built-ins, which I'm not using.

Using UCE for custom elements (thanks). The live version was built with Webpack, but I don't think it's Webpack related since it still happens when serving vanilla modules with Snowpack.

Here is the stack trace.

SyntaxError: The string did not match the expected pattern.
http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js [:329:34]
querySelectorAll@[native code]
parseShadow@http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js:329:34
handle@http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js:401:27
_loop@http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js:113:33
loop@http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js:135:14
callback@http://localhost:8080/_snowpack/pkg/@ungap/custom-elements.js:80:15
WebReflection commented

can you please not use bundlers and tell me if you have the same issue? in the mentioned file there's no use strict, as example, so that querySelectorAll(this) passes an object, which is not my code intent.

WebReflection commented

remove this polyfill from your bundlers, put this on top of the page, and see if you have still the same issue:

<script src="https://unpkg.com/@ungap/custom-elements"></script>

if you do, you need to tell me more qhat are you doing there, or what are you querying, if you don't, you gotta figure it out with your bundlers, but I might consider enforcing a string there.

WebReflection commented

@davidbwaters OK, there was indeed a gotcha in my code, so that the latest version should've fixed that. Please let me know f that's not the case, thank you for your patience 👋

  • 👍1
WebReflection commented

actually reverted previous changes and found the issue for real. Basically you are using Shadow DOM and the qSA related to shadow dom was triggered and it was querying an empty list of selectors. I have nonestly no idea how, or why, that happened, but the bug is fixed for now.

  • 👍1
WebReflection commented

plot twist: I understand why it was happening, so the fix is good as it is now. Please let me know if you'll have any other issue with latest, but the good news is that your components/page was working regardless the error, so it had no side effects in practice, but now no error should be shown, ever.

  • 👍1