vue-custom-element: Not working on Firefox even with polyfill.

I have everything working flawlessly on Chrome, Edge, IE9+, Android, and iOS. However, doesn’t work on Firefox, even with polyfill. No errors. Even the expected, [Vue warn]: Method "$emit" conflicts with an existing Vue instance method. Avoid defining component methods that start with _ or $. error is missing. Just a silent failure and the component’s DOM isn’t getting inserted into the custom element body.

Chrome/Edge/IE9+/Android/iOS:

notbroken

Firefox:

broken

The demos on the main site are broken as well, for some easy test cases.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 18 (7 by maintainers)

Most upvoted comments

@karol-f Docs can be updated - I had issue with Firefox and spent a bit of time trying polyfill stuff (unsuccessfully), only to realize the actual problem was getting my bundle to load in the first place (Firefox wants “file:///” before location if local drive, as it turns out). Looks like shortly after the “59+” part was added, support officially started (63+):

https://caniuse.com/custom-elementsv1

@karol-f: ha, totally missed that. I guess I was looking at this, slightly above that browser support section:

Optional polyfill For cross-browser compatibility (IE9+) use Custom Elements polyfill.

Maybe add something like, ‘Firefox, etc. - see table below’? If not, no worries.

Looked at the jsfiddle above, works in Firefox 57.0b3 (64-bit) (because it has the polyfill)

Firefox requires the polyfill.

with polyfill : https://jsfiddle.net/g8w1hsLp/5/ without polyfill: https://jsfiddle.net/q01cjh3u/2/

edit: well this is annoying… it works now. unexplainable!