HTML Import webcomponents polyfill在Firefox中不起作用答案

【问题标题】：HTML Import webcomponents polyfill not working in firefoxHTML Import webcomponents polyfill在Firefox中不起作用
【发布时间】：2017-01-19 09:57:29
【问题描述】：

我正在示例应用程序中尝试 Web 组件。由于某些浏览器不包含某些规范，因此我尝试使用 polyfill。在 Mozilla firefox 中，我尝试启用密钥 dom.webcomponents.enabled 并添加一些 polyfill（不在浏览器中）。我使用了来自 webcomponents.js polyfill 的 HTML Import polyfill。

HTMLImport 仍然无法在 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 结合起来？

【问题讨论】：

标签： web-component polyfills custom-element html-imports

【解决方案1】：

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

不要激活 Firefox 标志，因为实施已过时。
安装 webcomponentsjs（例如使用 bower），并仅在主文件中包含 htmlimports.min.js 文件。
安装 custom-elements（来自您的链接）并包含在您的主文件 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>

注意：第三步，你也可以使用document-register-element。

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

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

【讨论】：

我看不到下载 webcomponentsjs 是如何连接到的，包括 only htmlimports.min.js。当我检查包裹时，我没有看到任何这样的文件？
@Peak 自发布答案以来，链接包的版本和内容已经发展。现在你最好关注这个新帖子：stackoverflow.com/q/51939275/4600982