javascript - Safari 上可定制的内置元素——通过脚本标签与 ES6 导入进行 polyfill

Question

我正在构建一个仅使用原生原生 JS 功能(ES6、Web 组件、导入模块)的网站。
我想包含一个 polyfill 来让 Safari 支持扩展 HTML 元素 (class MyLink extends HTMLAnchorElement)。理想情况下，我想通过 import 包含它在我的 main.js 文件中，而不是作为 <script>我的 index.html 中的标记。
我先试了官方Custom Elements V1 polyfill ，包括通过脚本标签( <script src="https://unpkg.com/@webcomponents/custom-elements"></script> )以及通过 import (import "https://cdn.skypack.dev/@webcomponents/custom-elements";)。两种方式都没有错误，但我没有看到对在 Safari 上扩展内置元素的支持。
我试过a different polyfill明确提到可定制的内置元素，在这种情况下，通过脚本标签添加它确实可以在 Safari 上运行:

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

但是如果我在我的js中导入它仍然不起作用:

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

我是否使用了错误的 CDN？错误的polyfill？有什么不同？为什么它通过脚本标签工作而不是作为 ES6 导入？
如果它是相关的，这是我试图开始工作的自定义元素的声明:

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

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

Answer 1

原来这是一个进口订购问题(感谢@AndreaGiammarchi 链接到 the GitHub issue)。
通过脚本标签包含 polyfill，我的脚本和导入的顺序如下:

<script src="//unpkg.com/@ungap/custom-elements/es.js"></script>
<script type="module" src="/components/ButtonLink.js"></script> <!-- <-- The component was defined here, along with the call to customElements.define() -->
<script type="module" src="/main.js"></script>

通过 import 包含 polyfill ，我试图让它与 import 一起工作添加到 main.js 顶部的语句(在 ButtonLink.js 之后加载并且没有任何效果)。
在我的自定义元素脚本文件顶部导入 polyfill 修复了它。