Safari 上可定制的内置元素——通过脚本标签 vs ES6 导入的 polyfill

Question

我正在构建一个仅使用原生 vanilla JS 功能（ES6、网络组件、导入模块）的网站。

我想包含一个 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，我试图让它与添加到 main.js 顶部的 import 语句一起工作（在 [=14= 之后加载） =] 并且没有任何效果）。

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

Safari 上可定制的内置元素——通过脚本标签 vs ES6 导入的 polyfill

Customizable built-in elements on Safari – polyfill via script tag vs ES6 import

javascript

web-component

cdn

es6-modules

custom-element