바벨로 클래스 기반 웹 컴포넌트를 변환하기

나는 최신 web components v1 class syntax 다음의 간단한 웹 컴포넌트를 가지고 있으며, Chrome과 Firefox/Edge (polyfill 포함)에서 잘 작동하지만 IE11에서 실행하고 싶습니다. 수업 진행. 그러나 바벨을 통해 실행하면 더 이상 브라우저에서 작동하지 않는 코드가 생성됩니다.바벨로 클래스 기반 웹 컴포넌트를 변환하기

클래스 구문과 호환되는 웹 구성 요소를 생성하는 방법이 있습니까? 호환성을 극대화하기 위해 웹 구성 요소를 작성하는 것이 더 좋습니다.

예제 코드 -

class TestElement extends HTMLElement { 
    connectedCallback(){ 
    this.innerHTML = "<div>Testing</div>" 
    } 
} 

customElements.define('test-element', TestElement)

때 오류 메시지 transpiled 코드를 사용하는 것입니다 -

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

출처

2017-01-01 Daaavvy

http://stackoverflow.com/questions/35003413/babeljs-doesnt-transpile-extended-classes-properly (http://stackoverflow.com/questions/33832646/extending의 사본) 사본 일 수 있습니까? -build-in-native-in-es6-with-babel - 그렇다면 다음 번에 transpile 또는 babel을 검색해보십시오. – mplungjan

근본적인 문제처럼 들리지만, 사람들과 관련하여이 문제를 해결하는 방법에 관심이 있습니다. 웹 구성 요소 - 또는 두 가지가 함께 작동하지 않을 수 있습니까? – Daaavvy

해결 방법? http://stackoverflow.com/a/39376819/295783 – mplungjan

Babel로 맞춤 요소 클래스를 컴파일하려면 Github의 plugin을 사용할 수 있습니다.

new 대신 Reflect.construct()이 사용되며, HTMLElement 개체에는 허용되지 않습니다.

출처

2017-01-01 12:28:31 Supersharp

하나의 해결책은 https://github.com/webcomponents/custom-elements

그것은 아니다이 polyfill로 사용할 수있는 네이티브 심을 사용하는 것입니다 완벽하지만 깨끗한 솔루션을 찾고 싶습니다.

출처

2017-01-01 08:28:39 belindab

고마워,이 실제로 복제 http://stackoverflow.com/questions/39477678/why-does-v1-web-component-customelements-define-throw- typeerror – Daaavvy

은 다른 솔루션에 많은 문제가 발생한 후 완벽하게 작동합니다. btw 그들은 "우리는 또한 구현을 개선하고 필요할 경우이를 자동으로 탐지하는이 접근법에 대한 향후 개선 사항을 연구 중입니다."라고 말했습니다. 흥미롭게도 파이어 폭스는 심을 필요로하지 않는다. – sasha

바벨로 클래스 기반 웹 컴포넌트를 변환하기

답변

관련 문제