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

Question

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

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

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

在 firefox 中，polyfill 是动态（同步）加载的，但会转换正文中的脚本标签：

<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.

我也尝试按照并单独下载 polyfills：

（旁注：copy/paste 来自 repo 文件的原始代码是否可取？我不知道这样做的另一种方法。我也发现实际上 定位非常混乱 正确的文件，因为有时文件位于根文件夹中，有时位于 'src' 中。我是不是遗漏了什么？）

我将 head 中的文件排序如下：

<!-- <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>

注意：我注释掉了 "general" 网络组件 polyfill，因为我正在尝试遵循参考问题的建议。

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

我还尝试使用特征检测来加载 polyfills WebComponents.org:

    <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 是 "loaded" 之后调用它，它被设置为导入 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

要使自定义元素 v1 与 Firefox 和 Edge 一起使用，您只需从 Web Components polyfill repository 加载 webcomponents-bundle.js 文件。

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

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

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

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

直接下载文件（右击link然后保存文件），
copy/paste原始内容，
使用绿色按钮 [Clone of Download] 使用 GIT 克隆存储库或将存储库下载为 ZIP 文件。

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

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

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

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

Web Components, HTML Imports polyfills not working in Firefox, IE

internet-explorer

firefox

web-component

polyfills

html-imports