Come creare elementi personalizzati dei componenti Web per lavorare con entrambe le specifiche

Devo costruire un componente che dovrebbe funzionare con entrambe le specifiche, custom elements spec v0che sono diventate obsolete e l' custom elements spec v1ultima versione stabile.

Se creo componenti con custom elements v0specifiche, alcune app dovranno affrontare problemi poiché stanno utilizzando polymer 2e sopra e lo stesso problema con le polymer 1applicazioni che non funzioneranno con le custom elements v1specifiche.

Non ho il controllo sulle applicazioni per modificare i polyfill , alcune applicazioni devono usare i polyfill e supportare le vecchie specifiche e alcuni i nuovi polyfill.

Sto cercando una soluzione solida per combinare entrambe le specifiche per eseguire i miei elementi personalizzati in tutte le applicazioni indipendentemente dalla versione dei polyfill. Posso aggiungere qualsiasi pezzo di polyfill o snippet ai miei componenti in modo che possano funzionare ovunque, non ho trovato alcuna libreria o polyfill che supporti entrambe le specifiche nella mia ricerca.

Ho in programma di scrivere un adattatore in grado di combinare entrambe le specifiche come la mappatura menzionata di seguito per il callback allegato, gli input su questo pensiero saranno molto apprezzati.

connectedCallback(){
    this.attachedCallback();
}

Ho provato a usare stenciljs ma può funzionare solo con l'ultima versione delle specifiche degli elementi personalizzati. Non ho trovato alcun modo per modificarlo per farlo funzionare con le specifiche precedenti.

Si prega di suggerire alcune alternative praticabili e soluzioni fattibili alla situazione sopra menzionata.

Fondamentalmente il tuo componente ha alcune dipendenze che sono definite nei polyfill direttamente o indirettamente. Se consideriamo queste dipendenze come nodi di un grafico delle dipendenze, allora abbiamo il problema che i grafici sono diversi. È possibile che un nodo esista in entrambi i grafici, ma che si comporti in modo diverso (implementazione più vecchia e più recente dello stesso function) ed è anche possibile che alcuni nodi presenti in un grafico manchino in un altro. Ovviamente puoi inserire alcuni riempimenti personali o qualcosa del genere, ma poi dovrai mantenere i riempimenti, che potrebbero essere meno che utili.

Un approccio migliore secondo me è quello di implementare un function, come

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

Non sono sicuro di come implementarlo function, ma se esiste uno functionche produce la versione corretta o alcune differenze evidenti tra le funzionalità, allora puoi implementare la funzione sopra di conseguenza. E quindi, esegui questo codice:

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

Sospetto che tu ne sia consapevole Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Quello che potresti fare è andare sul Can I usesito Web e controllare le versioni di supporto del browser per vedere quale browser dovrebbe caricare quale versione degli elementi personalizzati ...

Successivamente implementare quanto segue per controllare il browser e la versione e caricare di conseguenza l'elemento personalizzato corretto per il browser desiderato ( altro qui ) se non si desidera utilizzare librerie esterne.

Se stai bene usando librerie esterne prova Bowser per rilevare versione, piattaforma ecc.

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