Erstellen von benutzerdefinierten Elementen für Webkomponenten für beide Spezifikationen

Ich muss eine Komponente erstellen, custom elements spec v0die mit beiden Spezifikationen funktionieren muss, die veraltet sind, und der custom elements spec v1neuesten stabilen Version.

Wenn ich Komponenten mit custom elements v0Spezifikationen erstelle, treten bei einigen Apps Probleme auf, da sie polymer 2und höher verwendet werden, und das gleiche Problem bei polymer 1Anwendungen, die mit custom elements v1Spezifikationen nicht funktionieren .

Ich habe keine Kontrolle über Anwendungen zum Ändern von Polyfills , einige Anwendungen müssen Polyfills verwenden, die alte Spezifikationen unterstützen, und einige verwenden neue Polyfills.

Ich suche nach einer soliden Lösung, um beide Spezifikationen zu kombinieren und meine benutzerdefinierten Elemente in allen Anwendungen unabhängig von der Polyfills-Version auszuführen. Ich kann meinen Komponenten ein beliebiges Stück Polyfill oder Snippet hinzufügen, damit sie überall ausgeführt werden können. Ich habe keine solche Bibliothek oder Polyfill gefunden, die beide Spezifikationen in meiner Forschung unterstützen.

Ich plane, einen Adapter zu schreiben, der beide Spezifikationen wie die unten erwähnte Zuordnung für angehängten Rückruf kombinieren kann. Eingaben zu diesem Gedanken werden sehr geschätzt.

connectedCallback(){
    this.attachedCallback();
}

Ich habe versucht, Schablonen zu verwenden, aber es kann nur mit der neuesten Version der Spezifikation für benutzerdefinierte Elemente funktionieren. Ich habe keine Möglichkeit gefunden, es zu optimieren, damit es mit früheren Spezifikationen funktioniert.

Bitte schlagen Sie einige praktikable Alternativen und mögliche Lösungen für die oben genannte Situation vor.

Grundsätzlich weist Ihre Komponente einige Abhängigkeiten auf, die entweder direkt oder indirekt in den Polyfills definiert sind. Wenn wir diese Abhängigkeiten als Knoten eines Abhängigkeitsgraphen betrachten, haben wir das Problem, dass die Graphen unterschiedlich sind. Es ist möglich, dass ein Knoten in beiden Diagrammen vorhanden ist, sich jedoch unterschiedlich verhält (ältere und neuere Implementierung desselben function), und es ist auch möglich, dass einige Knoten, die in einem Diagramm vorhanden sind, in einem anderen fehlen. Sie können natürlich einige eigene Polyfills oder ähnliches einfügen, aber dann müssten Sie Polyfills pflegen, was möglicherweise weniger hilfreich ist.

Ein besserer Ansatz ist meiner Meinung nach die Implementierung eines function, wie

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

Ich bin nicht sicher, wie ich das implementieren soll function, aber wenn es entweder eine gibt, functiondie die richtige Version liefert, oder einige offensichtliche Unterschiede zwischen den Funktionen, dann können Sie die obige Funktion entsprechend implementieren. Führen Sie dann diesen Code aus:

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

Ich vermute, Sie wissen das Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Was Sie tun können, ist, auf die Can I useWebsite zu gehen und die Browser-Support-Versionen zu überprüfen, um festzustellen, welcher Browser welche Version mit benutzerdefinierten Elementen laden soll ...

Implementieren Sie anschließend das Folgende, um den Browser und die Version zu überprüfen und das richtige benutzerdefinierte Element für den gewünschten Browser entsprechend zu laden ( mehr hier ), wenn Sie keine externen Bibliotheken verwenden möchten.

Wenn Sie mit der Verwendung externer Bibliotheken einverstanden sind, versuchen Sie es mit Bowser , , um Version, Plattform usw. zu erkennen.

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