HTML 导入 webcomponents polyfill 在 firefox 中不起作用

Question

我正在示例应用程序中尝试网络组件。由于某些浏览器未包含某些规范，因此我尝试为这些浏览器使用 polyfill。在 Mozilla firefox 中，我尝试通过启用键 dom.webcomponents.enabled 并添加一些 polyfill（不在浏览器中）。我使用了 HTML 从 webcomponents.js polyfill 导入 polyfill。

仍然HTML导入在 Firefox、Internet Explorer 中不起作用（即使使用 polyfill）。 (https://github.com/webcomponents/webcomponentsjs)

我还尝试了 customElements v1 polyfill，但无法在 Internet Explorer 和 Firefox 中使用。 (https://github.com/webcomponents/custom-elements)

有没有人成功地将 HTMLimports polyfill 包含在 customElements V1 polyfill 中？

Answer 1

要在 Firefox 中使用带有 HTML 导入的自定义元素 v1：

不要激活 Firefox 标志，因为实施已过时。
安装 webcomponentsjs（以 bower 为例），并仅包含在主文件 htmlimports.min.js 文件中。
安装 custom-elements（来自您的 link）并包含在您的主文件中 custom-elements.min.js.

您的主页应该如下所示：

<head>
   <script src="htmlimports.min.js"></script>
   <script src="custom-elements.min.js"></script>
   <link rel="import" href="your-components.html">
</head>
<body>
    <your-component></your-component>

注意： 对于第 3 步，您也可以使用 document-register-element.

您不能直接在 Internet Explorer 中使用自定义元素 v1 class 语法，因为 class 未实现。您首先需要使用像 Babel 这样的转译器来转换源代码。

或者，使用现代版本 (Edge)，或使用 prototype 语法。

HTML 导入 webcomponents polyfill 在 firefox 中不起作用

HTML Import webcomponents polyfill not working in firefox

web-component

polyfills

custom-element

html-imports