Question

我正在尝试按照https://www.webcomponents.org/polyfills/中的解释来填充web组件，因为我希望我的示例应用可以在Chrome和Firefox上运行。但是我在Firefox中遇到 ReferenceError：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中一切正常（有/无填充）

Answer 1

您使用的是旧版本的 webcomponentsjs polyfill，它实现了自定义元素v0的document.registerElement()，而不是v1的customElements.define()。

您应该使用新的version 1.0 on github。

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

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

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

Web组件Polyfill无法正常工作

1 个答案: