WebコンポーネントPolyfillが動作しない

私はサンプルアプリケーションをChromeとFirefoxの両方で動作させたいので、https://www.webcomponents.org/polyfills/で説明したように、Webコンポーネントをポリフィルすることを試みています。しかし、私はReferenceErrorを取得しています：customElementsは定義されていません Firefoxでエラーが発生しました。下記の私のコードをindex.htmlでご覧ください。WebコンポーネントPolyfillが動作しない

<!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で正常に動作します（と/ポリフィルなし）

出典

2017-11-08 Mahesh V S

私はあなたがあなたのコンポーネントが含まれ_before_あなたのポリフィルローダコードを配置する必要があると思います。 – Intervalia

どのバージョンのwebcomponents polyfillを使用しますか？ – Supersharp

私はこれを次の行で見ることができます：10 of webcomponents.js // @version 0.7.24 –

あなたはカスタム要素V0のdocument.registerElement()代わりに、V1のcustomElements.define()のを実装しwebcomponentsjsポリフィル、古いバージョンを使用しています。

新しいversion 1.0 on githubを使用してください。

ちょうどあなたのページの<head>一部にwebomponents-lite.jsスクリプトを読み込む：

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

出典

2017-11-10 21:59:10 Supersharp

これはうまくいきましたが、私は新しい問題があります - https://stackoverflow.com/questions/47233481/attached-shadowroot-using-polyfill-クエリ可能ではありません。一方、バニラWebコンポーネントのサンプルはどこにいらっしゃいますか？ –

いくつかの例があります。つまり、https://stackoverflow.com/a/38990195/4600982 – Supersharp

@MaheshVSです。これを確認できます：https://ayushgp.github.io/html-web-components-using-vanilla -js – ayushgp

WebコンポーネントPolyfillが動作しない

答えて

関連する問題