2

我正在尝试按照https://www.webcomponents.org/polyfills/中的说明填充 webcomponents，因为我希望我的示例应用程序可以在 Chrome 和 Firefox 上运行。但是我收到ReferenceError: customElements is not defined在 Firefox 中的错误。在 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）

4

1 回答 1

5

您使用的是旧版本的webcomponentsjs polyfill，它实现了 Custom Elements v0'sdocument.registerElement()而不是 v1's customElements.define()。

您应该使用github 上的新版本 1.0 。

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

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

更新：现在 polyfill 第 2 版已发布。HTML Imports polyfill 不再发货，但可以单独使用，或者您仍然可以下载v1 分支。

于 2017-11-10T21:59:10.907 回答