Should I be able to add the polyfill via ES6 import?

[elisehein]

Instead of adding the script tag (which works brilliantly!)

 <script src="//unpkg.com/@ungap/custom-elements/es.js"></script>

should I be able to add this polyfill via an ES6 import in my JS as well?

import ungapCustomElements from "https://cdn.skypack.dev/@ungap/custom-elements";

I'm experimenting with a no-build web dev approach to try and learn what's possible in modern browsers with vanilla JS, web components and ES6 import modules. I'm happy to use the script tag, but module CDNs just came up in my research and it got me thinking whether I should be able to use them in this instance.

I tried importing from both the unpgk URL (which errors on Safari) as well as from cdn.skypack. As I understand, Skypack should deliver vanilla js formatted as an ES6 module that I should be able to just import with no build steps needed. The import seems to work, but it doesn't fix my custom element.

In case it matters, I'm trying to get customizable built-in components working on Safari. Here's my declaration:

class ButtonLink extends HTMLAnchorElement {
  connectedCallback() {
    console.log("This is not called on Safari");
  }
}

customElements.define("button-link", ButtonLink, { extends: "a" });

[WebReflection]

In uce-template I use import '@ungap/custom-elements'; and it just works. https://github.com/WebReflection/uce-template/blob/master/esm/index.js

[WebReflection]

P.S. you can import 'https://unpkg.com/@ungap/custom-elements?module'; and it should just work too. Not sure what skypack serves, as I don't control these CDNs.

[elisehein]

Thanks! It does work. My problem was script load order 🤦🏼‍♀️

Here's a codepen, in case anyone ever comes across this.

[WebReflection]

@elisehein glad it solved, but I'd update the HTML bit with:

<a is="my-link" href="#">My link</a>

at least it's a proper link :-)