2

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

我按照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。

我还尝试遵循这个 StackOverflow 答案并分别下载了 polyfill：

（旁注：是否建议从 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>

注意：当我尝试遵循参考问题的建议时，我注释掉了“通用”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

4

1 回答 1

2

要使 Custom Elements v1 与 Firefox 和 Edge 一起使用，您只需从Web Components polyfill 存储库加载webcomponents-bundle.js文件。

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

要使 HTML Imports 与 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 在 Internet Explorer 中创建自定义元素 v0，但不建议这样做。

如果您想使用自定义元素，请忘记 IE :-)

于 2018-08-29T16:47:01.500 回答