Web 组件、HTML 导入 polyfill 在 Firefox、IE 中不起作用

Question

我正在尝试让 Web 组件和 HTML 导入在 Firefox 和 IE 中工作。

我按照the Web Components GitHub repo 的说明进行操作，通过 npm 安装文件，并将其包含在我的文档开头。

我有一个在文档正文中调用的自定义脚本。

在 firefox 中，polyfill 是动态（同步）加载的，但会将 body 中的 script 标签从：

<script type="module" src="./src/scripts/init.js"></script>

到

<script src="/components/requirejs/require.js"></script>
<script>require(["./src/scripts/init.js"]);</script>

我收到以下错误： ReferenceError: require is not defined.

我也尝试关注this StackOverflow answer 并单独下载了 polyfill：

• Web Components polyfill
• Custom Elements Polyfill
• HTML Imports Polyfill 安全措施

（旁注：是否建议从 repo 文件中复制/粘贴原始代码？我不知道这样做的另一种方法。我也发现实际上 locating 正确文件，因为有时该文件位于根文件夹中，有时位于“src”中。我错过了什么吗？）

我对@9​​87654334@ 中的文件进行排序，如下所示：

<!-- <script src="src/scripts/helper/web-components-polyfill.js"></script> -->
  <script type="text/javascript" src="src/scripts/helper/html-imports-polyfill.js"></script>
  <script type="text/javascript" src="src/scripts/helper/custom-element-polyfill.js"></script>

注意：当我尝试遵循参考问题的建议时，我注释掉了“通用”Web 组件 polyfill。

在 Firefox 和 IE 中，我得到同样的错误：require is not defined。我在 Firefox 中得到了这个额外的好处：

我还尝试使用特征检测来按照 WebComponents.org 加载 polyfill：

    <script type="text/javascript">
     (function() {
         if ('registerElement' in document
            && 'import' in document.createElement('link')
            && 'content' in document.createElement('template')) {
            // platform is good!
         } else {
            // polyfill the platform!
            console.log('loading the polyfills');
            var e = document.createElement('script');
            e.type = "text/javascript";
            e.src = './src/scripts/helper/html-imports-polyfill.js';
            document.head.appendChild(e);
            var f = document.createElement('script');
            f.src = './src/scripts/helper/custom-elements-polyfill.js';
            document.head.appendChild(f);
         }
      })();
   </script>

我再次收到一组类似的错误：

启动应用程序的脚本，init.js，我在 polyfill 被“加载”后调用，它被设置为导入 HTML 片段并将它们附加到文档中。这是我用来执行此操作的函数：

   /**
     * Dynamically imports HTML into the Main file
     *
     * @param  {String} path The path to the document to import
     * @return {[type]}     [description]
     */
    function _importHTML(path) {
        console.log('importHTML called', path);

        let link = document.createElement('link');
        link.rel = 'import';
        link.href = path;

        link.onload = (e) => {
            // console.log('Successfully loaded', e.target.href);
        }

        link.onerror = (e) => {
            console.log('Error loading', e.target.href);
        }

        document.head.appendChild(link);

    }

不用说，但在 Chrome 中一切正常。

请帮忙！ :D

Answer 1

要使 Custom Elements v1 与 Firefox 和 Edge 配合使用，您只需从 Web Components polyfill repository 加载 webcomponents-bundle.js 文件。

<script src="/your_path/webcomponents-bundle.js"></script>

要使 HTML 导入在 Firefox、IE 和 Edge 上工作，您只需从 HTML Imports polyfill repository 加载 html-imports.min.js 文件。

<script src="/your_path/html-imports.min.js"></script>

要获得 polyfill，您可以在 github 上：

• 直接下载文件（右击链接保存文件），

• 复制/粘贴原始内容，

• 使用绿色按钮 [Clone of Download] 使用 GIT 克隆存储库或将存储库下载为 ZIP 文件。

---

在 Internet Explorer 中使用 polyfill 创建自定义元素 v1 更加复杂，因为类在 Internet Explorer 中不存在并且不能完全 polyfill 自己。

但是，可以使用 polyfill 在 Internet Explorer 中创建自定义元素 v0，但不建议这样做。

如果你想使用自定义元素，那么忘记 IE :-)