Cara membuat elemen web komponen kustom untuk bekerja dengan kedua spesifikasi

Saya perlu membangun komponen yang harus bekerja dengan kedua spesifikasi, custom elements spec v0yang sudah usang dan custom elements spec v1, versi stabil terbaru.

Jika saya membangun komponen dengan custom elements v0spec, beberapa aplikasi akan menghadapi masalah karena mereka menggunakan polymer 2dan di atas dan masalah yang sama dengan polymer 1aplikasi yang tidak akan bekerja dengan custom elements v1spec.

Saya tidak memiliki kontrol atas aplikasi untuk mengubah polyfill , beberapa aplikasi harus menggunakan polyfill mendukung spek lama dan beberapa menggunakan polyfill baru.

Saya mencari solusi yang solid untuk menggabungkan kedua spesifikasi untuk menjalankan elemen kustom saya di semua aplikasi terlepas dari versi polyfills. Saya dapat menambahkan potongan polyfill atau snippet ke komponen saya sehingga mereka dapat berjalan di mana saja, saya belum menemukan perpustakaan atau polyfill yang mendukung kedua spesifikasi dalam penelitian saya.

Saya berencana untuk menulis adaptor yang dapat menggabungkan kedua spesifikasi seperti pemetaan yang disebutkan di bawah untuk panggilan balik yang terlampir, input pada pemikiran ini akan sangat dihargai.

connectedCallback(){
    this.attachedCallback();
}

Saya mencoba menggunakan stenciljs tetapi hanya dapat bekerja dengan versi kustom terbaru dari elemen kustom. Saya belum menemukan cara untuk mengubahnya untuk membuatnya bekerja dengan spec sebelumnya.

Tolong sarankan beberapa alternatif yang layak dan solusi yang layak untuk situasi yang disebutkan di atas.

Pada dasarnya komponen Anda memiliki beberapa dependensi yang didefinisikan dalam polyfill baik secara langsung, maupun tidak langsung. Jika kita menganggap dependensi ini sebagai simpul dari grafik dependensi, maka kita memiliki masalah grafik yang berbeda. Ada kemungkinan bahwa sebuah node ada di kedua grafik, tetapi berperilaku berbeda (implementasi yang lebih lama dan lebih baru dari yang sama function) dan juga mungkin bahwa beberapa node yang ada dalam grafik tidak ada pada yang lain. Anda tentu saja dapat memasukkan beberapa polyfill Anda sendiri atau sejenisnya, tetapi kemudian Anda perlu memelihara polyfill, yang mungkin kurang bermanfaat.

Pendekatan yang lebih baik menurut saya adalah menerapkan function, seperti

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

Saya tidak yakin bagaimana mengimplementasikan ini function, tetapi jika ada functionyang menghasilkan versi yang tepat, atau beberapa perbedaan yang jelas antara fungsi, maka Anda dapat mengimplementasikan fungsi di atas sesuai. Dan kemudian, jalankan kode ini:

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

Saya kira Anda tahu itu Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Apa yang dapat Anda lakukan adalah pergi ke Can I usesitus web dan memeriksa versi dukungan browser untuk melihat browser mana yang memuat versi elemen kustom mana ...

Setelah itu terapkan di bawah ini untuk memeriksa browser dan versi dan memuat elemen kustom yang benar untuk browser yang diinginkan ( lebih lanjut di sini ) jika Anda tidak ingin menggunakan perpustakaan eksternal.

Jika Anda setuju menggunakan perpustakaan eksternal, coba Bowser untuk mendeteksi versi, platform, dll.

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.
}