Webcomponents Polyfill not working

내 샘플 앱이 Chrome과 Firefox에서 작동하기를 원했기 때문에 나는 https://www.webcomponents.org/polyfills/에서 설명한대로 웹 구성 요소를 polyfill하려고합니다. 그러나 나는 받고있다 ReferenceError : customElements가 정의되지 않았다. Firefox에서 오류. 아래의 코드를 index.html에서 참조하십시오.Webcomponents Polyfill not working

<!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 : 모든 당신은 webcomponentsjs 구현 polyfill, 이전 버전을 사용하는

출처

2017-11-08 Mahesh V S

나는 당신이 당신에게 구성 요소를 포함 _before_ 당신의 polyfill 로더 코드를 배치 할 필요가 있다고 생각합니다. – Intervalia

어떤 버전의 webcomponents polyfill을 사용합니까? – Supersharp

나는 이것을 다음과 같이 볼 수있다 : 10 of webcomponents.js // @version 0.7.24 –

(와 /를 polyfill없이) 크롬에서 잘 작동하는 사용자 지정 요소 V0의 document.registerElement() 대신 V1의 customElements.define().

새 version 1.0 on github을 사용해야합니다.

는 그냥 webomponents-lite.js을로드 스크립트를 페이지의 <head> 부분 :

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

출처

2017-11-10 21:59:10 Supersharp

이것은 효과가 있었지만 새로운 이슈가있다 - https://stackoverflow.com/questions/47233481/attached-shadowroot-using-polyfill- 질의가 가능하지 않습니다. 그동안 바닐라 웹 컴포넌트의 샘플을 어디서 구할 수 있습니까? –

몇 가지 예를 확인할 수 있습니다. 즉, https://stackoverflow.com/a/38990195/4600982 – Supersharp

@MaheshVS에서 확인할 수 있습니다. https://ayushgp.github.io/html-web-components-using-vanilla -js – ayushgp

Webcomponents Polyfill not working

답변

관련 문제