Cách xây dựng các thành phần tùy chỉnh các thành phần web để hoạt động với cả hai thông số kỹ thuật

Tôi cần phải xây dựng một thành phần đó nên cần phải làm việc với cả hai thông số kỹ thuật, custom elements spec v0mà đã bị phản đối và custom elements spec v1, phiên bản ổn định mới nhất.

Nếu tôi xây dựng các thành phần với custom elements v0thông số kỹ thuật, một số ứng dụng sẽ gặp phải sự cố do chúng đang sử dụng polymer 2trở lên và cùng một vấn đề với polymer 1các ứng dụng không hoạt động với custom elements v1thông số kỹ thuật.

Tôi không có quyền kiểm soát các ứng dụng để thay đổi polyfill , một số ứng dụng phải sử dụng polyfill hỗ trợ thông số cũ và một số sử dụng polyfill mới.

Tôi đang tìm kiếm một giải pháp vững chắc để kết hợp cả hai thông số kỹ thuật để chạy các yếu tố tùy chỉnh của mình trong tất cả các ứng dụng không phân biệt phiên bản polyfills. Tôi có thể thêm bất kỳ phần nào của polyfill hoặc đoạn trích vào các thành phần của mình để chúng có thể chạy ở bất cứ đâu, tôi không tìm thấy bất kỳ thư viện hoặc polyfill nào hỗ trợ cả thông số kỹ thuật trong nghiên cứu của mình.

Tôi đang dự định viết một bộ chuyển đổi có thể kết hợp cả hai thông số kỹ thuật như ánh xạ được đề cập dưới đây cho cuộc gọi lại đính kèm, đầu vào trên suy nghĩ này sẽ được đánh giá cao.

connectedCallback(){
    this.attachedCallback();
}

Tôi đã cố gắng sử dụng stprintjs nhưng nó chỉ có thể hoạt động với phiên bản mới nhất của thông số kỹ thuật tùy chỉnh. Tôi đã không tìm thấy bất kỳ cách nào để điều chỉnh nó để làm cho nó hoạt động với thông số kỹ thuật trước đó.

Vui lòng đề xuất một số giải pháp thay thế khả thi và giải pháp khả thi cho tình huống nêu trên.

Về cơ bản thành phần của bạn có một số phụ thuộc được xác định trong polyfill trực tiếp hoặc gián tiếp. Nếu chúng ta coi các phụ thuộc này là các nút của biểu đồ phụ thuộc, thì chúng ta có vấn đề về các biểu đồ là khác nhau. Có thể một nút tồn tại trong cả hai biểu đồ, nhưng hoạt động khác nhau (triển khai cũ hơn và mới hơn của cùng một biểu đồfunction ) và cũng có thể một số nút có trong biểu đồ bị thiếu trong một biểu đồ khác. Tất nhiên bạn có thể đưa vào một số polyfill của riêng bạn hoặc một cái gì đó tương tự, nhưng sau đó bạn sẽ cần phải duy trì polyfill, điều này có thể ít hữu ích hơn.

Một cách tiếp cận tốt hơn theo ý kiến ​​của tôi là thực hiện một function, như

function getWebComponentsVersion() {
    //Return v1 if it's v1 and v0 if it's v0
}

Tôi không chắc chắn làm thế nào để thực hiện điều này function, nhưng nếu có một functionphiên bản mang lại phiên bản phù hợp hoặc một số khác biệt rõ ràng giữa các chức năng, thì bạn có thể thực hiện chức năng trên cho phù hợp. Và sau đó, chạy mã này:

if (getWebComponentsVersion() === "v1") {
    //code for v1
} else {
    //code for v0
}

Tôi nghi ngờ bạn biết điều đó Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Những gì bạn có thể làm là vào Can I usetrang web và kiểm tra các phiên bản hỗ trợ của trình duyệt để xem trình duyệt nào sẽ tải phiên bản phần tử tùy chỉnh nào ...

Sau đó, thực hiện các thao tác dưới đây để kiểm tra trình duyệt và phiên bản và tải phần tử tùy chỉnh chính xác cho trình duyệt mong muốn phù hợp ( thêm tại đây ) nếu bạn không muốn sử dụng các thư viện bên ngoài.

Nếu bạn ổn với việc sử dụng các thư viện bên ngoài, hãy thử Bowser để phát hiện phiên bản, nền tảng, v.v.

navigator.browserSpecs = (function(){
    var ua = navigator.userAgent, tem, 
        M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return {name:'IE',version:(tem[1] || '')};
    }
    if(M[1]=== 'Chrome'){
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem != null) return {name:tem[1].replace('OPR', 'Opera'),version:tem[2]};
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return {name:M[0], version:M[1]};
})();

console.log(navigator.browserSpecs); //Object { name: "Firefox", version: "42" }

if (navigator.browserSpecs.name == 'Chrome') {
    // Do something for Chrome.
    if (navigator.browserSpecs.version > 76) {
        // Do something for Chrome versions greater than 76 like load v1.
    }
}
else {
    // Do something for all other browsers.
}