Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error extending native elements in Safari #17

Closed
danieldietrich opened this issue Feb 2, 2022 · 4 comments
Closed

Error extending native elements in Safari #17

danieldietrich opened this issue Feb 2, 2022 · 4 comments

Comments

@danieldietrich
Copy link
Owner

danieldietrich commented Feb 2, 2022 •
edited
Loading

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().

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

can-i-use

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>
@danieldietrich
Copy link
Owner Author

danieldietrich commented Feb 2, 2022 •
edited
Loading

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.

@danieldietrich
Copy link
Owner Author

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

Chrome

Safari

Safari

@danieldietrich
Copy link
Owner Author

danieldietrich commented Feb 2, 2022 •
edited
Loading

It looks like I am right - Safari does not (and probably will never) support customizable built-in elements.

Screen Shot 2022-02-03 at 00 07 30

Furthermore:

All BaseClasses like Google-Lit, Stencil, SalesForce-LWC, extend from HTMLElement (Autonomous Elements)

@danieldietrich
Copy link
Owner Author

danieldietrich commented Feb 2, 2022 •
edited
Loading

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

  1. Candid will not ship a polyfill for Safari or other browsers. For now, an existing polyfill can be used.

  2. 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.

  3. Candid leaves it up to the user to use customized built-in elements.

@danieldietrich danieldietrich mentioned this issue Feb 3, 2022
Closed
@JoinThisBand JoinThisBand mentioned this issue Jun 23, 2022
Open
@emilykl emilykl mentioned this issue Nov 30, 2023
Merged
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@danieldietrich