Web组件，HTML导入polyfills在Firefox，IE中不起作用 [英] Web Components, HTML Imports polyfills not working in Firefox, IE

问题描述

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

I am trying to get Web Components plus HTML Imports to work in Firefox and IE.

我按照 Web组件GitHub存储库上的说明进行操作，并通过npm安装了文件，然后将其包含在我文档的开头.

I followed the instructions as per the Web Components GitHub repo, installed the files via npm, and included it towards the head of my document.

我在文档的主体中有一个自定义脚本.

I have a custom script that is called in the body of the document.

在firefox中，polyfill是动态(同步)加载的，但是会转换以下内容在正文中的script标签:

In firefox, the polyfill is loaded dynamically (synchronously) but transforms the script tag in the body from:

<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答案并下载了分别填充:

I also tried following this StackOverflow answer and downloaded the polyfills separately:

• Web组件polyfill
• 自定义元素填充
• HTML导入Polyfill 以确保安全测量

• Web Components polyfill
• Custom Elements Polyfill
• HTML Imports Polyfill for safe measure

(旁注:是否建议从回购文件中复制/粘贴原始代码?我不知道这样做的另一种方法.我也发现将定位正确地设置起来非常混乱文件，有时文件位于根文件夹中，而其他时候则位于"src"中.我是否丢失了某些内容?)

(side note: is it advisable to copy/paste the raw code from a repo file? I don't know another way of doing this. I also find it very confusing actually locating the proper file as sometimes the file is located in the root folder, other times in 'src'. Am I missing something?)

我按如下所示对head中的文件进行排序:

I sequence the files in head like so:

<!-- <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中得到了额外的好处:

In Firefox and IE, I get the same error: require is not defined. I get this extra goodness in Firefox:

我还尝试按照 WebComponents.org> aWebComponents.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>

再次，我得到了类似的错误集:

Again, I get a similar set of errors:

启动应用程序的脚本init.js(在填充"填充后我称为)被设置为导入HTML片段并将其附加到文档中.这是我用来执行此操作的功能:

The script that launches the app, init.js, which I call after the polyfills are "loaded", is set up to import HTML fragments and append them to the document. Here is the function I use for doing that:

   /**
     * 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浏览器中一切正常.

It goes without saying, but everything works fine in Chrome.

请帮助！ :D

推荐答案

要将自定义元素v1与Firefox和Edge配合使用，您只需从 Web组件Polyfill存储库.

To make Custom Elements v1 work with Firefox and Edge, you just have to load the webcomponents-bundle.js file from the Web Components polyfill repository.

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

要使HTML Imports与Firefox，IE和Edge一起使用，只需从

To make HTML Imports work with Firefox, IE and Edge, you just have to load the html-imports.min.js file from HTML Imports polyfill repository.

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

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

To get the polyfills you can, on github, either :

• 直接下载文件(右键单击链接，然后保存文件)，

• download a file directly (right-click on the link then save the file),

复制/粘贴原始内容，

使用绿色按钮[Clone of Download](下载克隆)通过GIT克隆存储库或将存储库下载为ZIP文件.

use the green button [Clone of Download] to clone the repository with GIT or download the repository as a ZIP file.

与Internet Explorer一起使用polyfill创建自定义元素v1更为复杂，因为Internet Explorer中不存在类，并且类可能不完整 填充自己.

Using a polyfill with Internet Explorer to create a Custom Element v1 is more complicated because classes don't exist in Internet Explorer and cannot be fully polyfilled themselves.

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

However, it is possible to create Custom Elements v0 in Internet Explorer with a polyfill, but it's not recommended.

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

If you want to use Custom Elements then forget IE :-)

这篇关于Web组件，HTML导入polyfills在Firefox，IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！