Web组件Polyfill无法正常工作

Question

Web组件Polyfill无法正常工作

Mah*_*V S 2 javascript web-component polyfills shadow-dom html-imports

我正在尝试按照https://www.webcomponents.org/polyfills/中的解释来填充web组件,因为我希望我的示例应用程序可以在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>

Run Code Online (Sandbox Code Playgroud)

我错过了什么？

PS:Chrome中一切正常(有/无填充)

Answer 1

Sup*_*arp 5

您使用的是旧版本的webcomponentsjs polyfill,它实现了Custom Elements v0 document.registerElement()而不是v1 customElements.define().

你应该在github上使用新版本1.0.

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

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

Run Code Online (Sandbox Code Playgroud)

更新:现在polyfill版本2已发布.HTML Imports polyfill不再出厂,但可以单独使用,或者您仍然可以下载v1分支.

归档时间：	8 年，2 月前
查看次数：	1016 次
最近记录：	7 年，5 月前