Internet Explorer를 대상으로하는 사용자 지정 요소 폴리 폴리이 있습니까?

Question

내 앱에서 맞춤 요소를 사용하려고하며 모든 브라우저 (Chrome, Safari, Opera, FireFox, IE)와 호환 가능해야합니다. 나는 바벨과 함께 ES6에서 ES5로 코드를 옮겼다.

나는 Polyfills로보고 다음과 같은 사용하여, 인터넷 익스플로러를 제외한 모든 브라우저에서 로컬 사이트 작업을 할 수 있었다 :

<script src="../node_modules/webcomponents.js/webcomponents-lite.js"></script> 
<script src="../node_modules/@webcomponents/shadydom/shadydom.min.js"></script> 
script src="../node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script> 

내가 https://github.com/WebReflection/document-register-element으로 검토 한 사용자 지정 요소 ES5 어댑터 그러나 IE는 작동하지 않으며 다른 작동하는 브라우저 중 일부는 중단됩니다.

크로스 브라우저 테스트 사이트를 통해 IE를 테스트 해본 결과 검사 할 때 오류 메시지가 표시되지 않았습니다.

사용하고있는 요소

Answer 1

? 구성 요소가 지원되는 경우에만 물건을 사용하는 경우

가장 가능성이 구성 요소들이 의미 ES6로 작성,

그러나 ... IE11에서 잘

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

작품을 통해 https://www.npmjs.com/package/@webcomponents/webcomponentsjs 추가 바벨 같은 것이 발산 될 필요가 있습니다.

간단한 구성 요소가있는 경우 여기 코드를 붙여 넣기하여 테스트 할 수 있습니다. https://babeljs.io/repl/ 그런 다음 결과를 IE11에 제공하십시오.

대부분의 경우 자동으로 응용 프로그램을 빌드하는 단계가 필요합니다. 또는 개발을 위해 npm i -g polymer-cli을 사용하고 polymer serve을 수행하면 필요한 경우 자동으로 코드가 표시됩니다. (예 : 크롬을 지원하는 브라우저에 es6를 제공하고 (예 : Chrome과 같이) es5를 지원합니다 (IE11과 같은) 브라우저를 지원하지 않습니다 (예 : IE11)