search

11ty / is-land

A new performance-focused way to add interactive client-side components to your web site.
https://is-land.11ty.dev/
MIT License
541 stars 17 forks source link

Failed to execute 'querySelectorAll' in older browsers #23

Open d3v1an7 opened 8 months ago

d3v1an7 commented 8 months ago

Hey! I'm on v4, and have included is-land in my bundle with a import '@11ty/is-land';. The bundle target is es2017, as we seem to have quite a few older devices in our audience.

I've noticed the following error in Sentry, which points at this line:

SyntaxError: Failed to execute 'querySelectorAll' on 'Element': ':not(is-land,:defined,[defer-hydration])' is not a valid selector.
  at {_Island#2}.forceFallback(../../node_modules/@11ty/is-land/is-land.js:100:40)
  at {_Island#2}.connectedCallback(../../node_modules/@11ty/is-land/is-land.js:126:12)
  at app_default(../../node_modules/@11ty/is-land/is-land.js:328:25)
  at <anonymous>(../../src/js/app.js:4:45)

Only happens in relatively old browsers -- Chrome Mobile 39 through 60. Seems like folks on older phones?

I'm not sure what the best way to handle this might be for the lib as a whole? But for my very specific use case, I'd prefer the default in this instance to be 'just load the things right now', as if is-land wasn't being used at all -- I hope that makes sense!

d3v1an7 commented 8 months ago

I just noticed #21, which might already address some of this :)

vanarok commented 3 months ago

It looks like the maintainers have focused on developing the 11ty core instead of plugins