Error extending native elements in Safari
danieldietrich opened this issue · comments
Core issue: create a custom element which is a subclass of a native DOM element using the ES5 prototype chain. Current problem is the instantiation using new().
- see iVis-at-Bilkent/cytoscape.js-context-menus#55
- see WebReflection/document-register-element#159
- see https://stackoverflow.com/questions/41514964/what-does-reflect-construct-let-us-do-that-wasnt-doable-before
- see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target
- webcomponents/polyfills#108 (comment)
Looks like lit.dev does not support it. One more reason for us to do it!
This thread
https://dev.to/lkraav/comment/ad06
Browser support
See caniuse.com.
As of 2022-02-02
Solution / workaround
<!-- this should be on top of your HTML <head> scripts -->
<!-- it fixes customized built-in element in Safari and older browsers -->
<script src="//cdn.jsdelivr.net/npm/@ungap/custom-elements"></script>There is a statement.
It's not possible to use custom elements without ES6 classes. That was a design decision necessary to achieve consensus at the January face-to-face meeting.
Actually, I am in doubt if extending native elements works at all in Safari. I guess, the current Candid implementation of ES5-style classes is correct.
Here is code that uses ES6-style classes and should work according to the spec.
Chrome
Safari
It looks like I am right - Safari does not (and probably will never) support customizable built-in elements.
Furthermore:
All BaseClasses like Google-Lit, Stencil, SalesForce-LWC, extend from HTMLElement (Autonomous Elements)
Quick fix: include this polyfill
<!-- this should be on top of your HTML <head> scripts -->
<!-- it fixes customized built-in element in Safari and older browsers -->
<script src="//cdn.jsdelivr.net/npm/@ungap/custom-elements"></script>Strategy / design decisions
-
Candid will not ship a polyfill for Safari or other browsers. For now, an existing polyfill can be used.
-
Candid does support customized built-in elements, even if Safari currently does not support them. This makes Candid stand out from Google-Lit, Stencil, SalesForce-LWC and other libraries for custom element creation. Safari may support customized built-in elements in the future. To use them now, a workaround is to include the fore mentioned polyfill.
-
Candid leaves it up to the user to use customized built-in elements.