ungap/custom-elements

Error on Safari 9: Attemped to assign to readonly property

007lva opened this issue · 10 comments

First, thanks a lot for your work on this polyfill, it works quite well for us at rankia.com. I've just found a bug on Safari 9 that maybe you will be interested to check since the README mentions that even Safari 8 is supported:

Screenshot_2020-11-23_20-56-34

If you need to reproduce it, just visit the home page of rankia.com, Safari > 10 doesn't show any error.

I'm glad this module works for you but I've no idea what you expect me to do with a minified file that fails at column 2974 on line 2.

Closing until further details are provided on what doesn't work exactly.

To clarify further, this issue scores 3 out of 5 don't points, when it comes to file a bug, so please have a read and help me helping you
https://gist.github.com/WebReflection/f6dc8017a1c10f0ece2e292b0b9607ff

I see, now I've tried the full version to get more details and this is the line which is throwing the exception:

https://github.com/ungap/custom-elements/blob/master/index.js#L268

(HTMLBuiltIn.prototype = HTMLElement.prototype).constructor = HTMLBuiltIn;

TypeError: Attemped to assign to readonly property

I've found this error on Safari 9.1 on OS X El Capitan (through Browserstack). Do you need more details?

Thanks!

That's way better, thanks. As I couldn't find the issue in an entire minute browserstack gave me, I'm downloading EL Captain image and I will run more tests in VB. That list of browsers though was copied from the older polyfill, which did work on Safari 8 too, but it looks like Safari <= 9 has a non writable constructor, I need to check if it's at least configurable.

Meanwhile, if super-legacy is needed, you can copy and paste this <script> instead, on top of your files (the \x2f is not a typo, it's exactly how it should be)

<script>
if(!self.customElements)
  document.write('<script src="https://unpkg.com/document-register-element"><\x2fscript>');
</script>
<script src="https://unpkg.com/@ungap/custom-elements"></script>

note that the order matters, so just literally copy and paste this on top of your <head> tag and you're good to go, eventually use <script defer> for the ungap script only, and don't worry/care about the document.write as no modern browser will ever use it.

P.S. alternatively, to avoid double patch on builtin extends, you can try this instead:

<script>
(function(w,d,h){
h=d.documentElement;
h.insertBefore(
  d.createElement('script'),
  h.firstChild
).src='https://unpkg.com/'+(w.customElements?'@ungap/custom-elements':'document-register-element');
}(this,document));
</script>

bear in mind the rest of the scripts using customElements should be module or defer

as installing El Captain in Virtual Box is everything but trivial, I wonder if you could tell me what the console shows when typing this:

Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'constructor');

writable, configurable, and all properties are the one I am after, thanks.

Here you have it:

Screenshot_2020-11-27_11-11-35

awesome!

This should be fixed now, please let me know if that's not the case (also please wait until unpkg catches up with the latest version) 👋

Thanks! Now it works even on Safari 8.