Safari 上可定制的内置元素 – 通过脚本标签与 ES6 导入进行填充

Question

我正在构建一个仅使用本机、普通 JS 功能（ES6、Web 组件、导入模块）的网站。

我想包含一个 polyfill 来让 Safari 支持扩展 HTML 元素 ( class MyLink extends HTMLAnchorElement)。理想情况下，我想通过importmain.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 上扩展内置元素的支持。

我尝试了一个不同的polyfill，它明确提到了可定制的内置元素，在这种情况下，通过脚本标签添加它确实可以在Safari上运行：

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

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

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

我是否使用了错误的 CDN？错误的填充材料？有什么不同？为什么它可以通过脚本标签工作，但不能作为 ES6 导入？

如果相关的话，这是我尝试使用的自定义元素的声明：

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

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

Answer 1

事实证明，这是一个导入排序问题（感谢 @AndreaGiammarchi 链接到GitHub 问题）。

通过脚本标签包含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>

通过包含 via 的polyfill import，我试图让它与import添加到顶部的语句一起工作main.js（该语句是在之后加载的ButtonLink.js并且没有任何效果）。

在我的自定义元素脚本文件顶部导入 polyfill 修复了这个问题。