Question

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

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

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

在firefox中，polyfill是动态（同步）加载的，但是会从以下位置转换主体中的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：

（旁注：是否建议从回购文件中复制/粘贴原始代码？我不知道这样做的另一种方法。我也发现将定位正确地设置起来非常混乱文件，有时文件位于根文件夹中，而其他时候位于“ 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

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中不存在类，并且类不能完全填充自己。

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

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

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

1 个答案: