Webcomponents Polyfill 不工作

Question

我正在尝试按照 https://www.webcomponents.org/polyfills/ 中的说明填充 Web 组件，因为我希望我的示例应用程序在 Chrome 和 Firefox 上都能运行。但是我在 Firefox 中收到 ReferenceError: customElements is not defined 错误。请参阅下面的 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 中一切正常（with/without polyfill）

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.

Webcomponents Polyfill 不工作

Webcomponents Polyfill not working

javascript

web-component

polyfills

shadow-dom

html-imports