Comment créer des éléments personnalisés de composants Web pour fonctionner avec les deux spécifications

J'ai besoin de créer un composant qui devrait fonctionner avec les deux spécifications, custom elements spec v0qui sont obsolètes et la custom elements spec v1dernière version stable.

Si je crée des composants avec des custom elements v0spécifications, certaines applications rencontreront des problèmes car elles utilisent polymer 2et au-dessus et le même problème avec des polymer 1applications qui ne fonctionneront pas avec les custom elements v1spécifications.

Je n'ai pas de contrôle sur les applications pour changer les polyfills , certaines applications doivent utiliser des polyfills qui prennent en charge les anciennes spécifications et certaines utilisent de nouvelles polyfills.

Je recherche une solution solide pour combiner les deux spécifications pour exécuter mes éléments personnalisés dans toutes les applications, quelle que soit la version des polyfills. Je peux ajouter n'importe quel morceau de polyfill ou d'extrait de code à mes composants afin qu'ils puissent s'exécuter n'importe où, je n'ai trouvé aucune bibliothèque ou polyfill qui prend en charge les deux spécifications dans mes recherches.

Je prévois d'écrire un adaptateur qui peut combiner les deux spécifications comme le mappage mentionné ci-dessous pour le rappel ci-joint, les contributions sur cette pensée seront très appréciées.

connectedCallback(){
    this.attachedCallback();
}

J'ai essayé d'utiliser stenciljs mais cela ne peut fonctionner qu'avec la dernière version des spécifications des éléments personnalisés. Je n'ai trouvé aucun moyen de le modifier pour le faire fonctionner avec les spécifications antérieures.

Veuillez suggérer des alternatives viables et des solutions réalisables à la situation susmentionnée.

Fondamentalement, votre composant a certaines dépendances qui sont définies directement ou indirectement dans les polyfills. Si nous considérons ces dépendances comme des nœuds d'un graphe de dépendances, alors nous avons le problème des graphes différents. Il est possible qu'un nœud existe dans les deux graphiques, mais se comporte différemment (implémentation plus ancienne et plus récente du même function) et il est également possible que certains nœuds présents dans un graphique manquent dans un autre. Vous pouvez bien sûr ajouter des polyfills de votre choix ou quelque chose de similaire, mais vous devrez alors maintenir des polyfills, ce qui pourrait être moins qu'utile.

Une meilleure approche à mon avis est de mettre en œuvre un function, comme

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

Je ne sais pas comment implémenter cela function, mais s'il y a soit une functionqui donne la bonne version, soit des différences évidentes entre les fonctionnalités, alors vous pouvez implémenter la fonction ci-dessus en conséquence. Et puis, exécutez ce code:

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

Je suppose que vous le savez Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Ce que vous pourriez faire est d'aller sur le Can I usesite Web et de vérifier les versions de support du navigateur pour voir quel navigateur devrait charger quelle version des éléments personnalisés ...

Ensuite, implémentez ce qui suit pour vérifier le navigateur et la version et charger l'élément personnalisé correct pour le navigateur souhaité en conséquence ( plus ici ) si vous ne souhaitez pas utiliser de bibliothèques externes.

Si vous êtes d'accord avec l'utilisation de bibliothèques externes, essayez Bowser pour détecter la version, la plate-forme, etc.

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