Transpiling thành phần web dựa trên lớp với babel

Question

Tôi là một thành phần web đơn giản theo sau web components v1 class syntax mới nhất, nó hoạt động tốt trong Chrome và Firefox/Edge (với một polyfill) nhưng tôi muốn nó chạy trong IE11 vì vậy tôi cần transpile lớp. Tuy nhiên chạy nó thông qua babel tạo mã không còn hoạt động trong bất kỳ trình duyệt nào.

Có cách nào để tạo các thành phần web tương thích ngược với cú pháp lớp hoặc có cách nào ưu tiên để viết các thành phần web để có khả năng tương thích tối đa không?

đang

Ví dụ -

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

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

Thông báo lỗi khi sử dụng mã transpiled là -

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

Answer 1

Để biên dịch các lớp Custom Element với Babel, bạn có thể sử dụng số này plugin từ Github.

Nó sẽ sử dụng Reflect.construct() thay vì new, không được phép với các đối tượng HTMLElement.

Answer 2

Một giải pháp là sử dụng các bản địa-shim sẵn với polyfill này https://github.com/webcomponents/custom-elements

Nó không hoàn hảo mặc dù, muốn tìm một giải pháp sạch hơn.