WebComponents Polyfill无法正常工作 | Polyfill无法正常工作

本文介绍了WebComponents Polyfill无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正尝试按照> https://www.webcomponents.org/polyfills/，因为我希望我的示例应用程序可同时在Chrome和Firefox上运行.但是我收到了 ReferenceError:在Firefox中未定义customElements 错误.请在下面的index.html上查看我的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample</title>
    <link rel="stylesheet" href="css/site.css">
    <!-- Components -->
    <link rel="import" href="components/global/site-navigation.html">
</head>

<body>
    <script>
        (function () {
            if ('registerElement' in document
                && 'import' in document.createElement('link')
                && 'content' in document.createElement('template')) {
                // platform is good!
            } else {
                // polyfill the platform!
                var e = document.createElement('script');
                e.src = 'js/webcomponents.js';
                document.body.appendChild(e);
            }
        })();
    </script>
    <site-navigation></site-navigation>
</body>
</html>

我想念什么?

PS:Chrome(带/不带polyfill)的一切工作正常

解决方案

您正在使用旧版本的 webcomponentsjs polyfill，该实现实现了Custom Elements v0的document.registerElement()而不是v1的customElements.define()./p>

您应该在github上使用新的 1.0版.

只需在页面的<head>部分中加载 webomponents-lite.js 脚本:

<script src="webcomponents-lite.js"></script>

更新:现在，polyfill版本2已发布. "HTML导入" polyfill已不再提供，但可以单独使用，或者仍然可以下载 v1分支.

I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Sample</title>
    <link rel="stylesheet" href="css/site.css">
    <!-- Components -->
    <link rel="import" href="components/global/site-navigation.html">
</head>

<body>
    <script>
        (function () {
            if ('registerElement' in document
                && 'import' in document.createElement('link')
                && 'content' in document.createElement('template')) {
                // platform is good!
            } else {
                // polyfill the platform!
                var e = document.createElement('script');
                e.src = 'js/webcomponents.js';
                document.body.appendChild(e);
            }
        })();
    </script>
    <site-navigation></site-navigation>
</body>
</html>

What am I missing?

PS: Everything works fine in Chrome (with/without the polyfill)

解决方案

You are using an old version of webcomponentsjs polyfill, which implements Custom Elements v0's document.registerElement() instead of v1's customElements.define().

You should use the new version 1.0 on github.

Just load the webomponents-lite.js script in the <head> part of your page:

<script src="webcomponents-lite.js"></script>

Update: Now polyfill version 2 was released. HTML Imports polyfill is not shipped any more, but can be used it separately, or you can still download v1 branch.

这篇关于WebComponents Polyfill无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..