Cómo construir elementos personalizados de componentes web para trabajar con ambas especificaciones

Necesito construir un componente que deba funcionar con ambas especificaciones, custom elements spec v0que quedaron obsoletas y con la custom elements spec v1última versión estable.

Si construyo componentes con custom elements v0especificación, algunas aplicaciones enfrentarán problemas ya que están usando polymer 2y superiores y el mismo problema con polymer 1aplicaciones que no funcionarán con la custom elements v1especificación.

No tengo control sobre las aplicaciones para cambiar polyfills , algunas aplicaciones tienen que usar polyfills admite especificaciones antiguas y algunas usan nuevos polyfills.

Estoy buscando una solución sólida para combinar las especificaciones para ejecutar mis elementos personalizados en todas las aplicaciones, independientemente de la versión de polyfills. Puedo agregar cualquier pieza de polyfill o fragmento a mis componentes para que puedan ejecutarse en cualquier lugar, no he encontrado ninguna biblioteca o polyfill que admita ambas especificaciones en mi investigación.

Estoy planeando escribir un adaptador que pueda combinar tanto las especificaciones como el mapeo mencionado a continuación para la devolución de llamada adjunta, las entradas en este pensamiento serán muy apreciadas.

connectedCallback(){
    this.attachedCallback();
}

Intenté usar stenciljs pero solo puede funcionar con la última versión de la especificación de elementos personalizados. No he encontrado ninguna forma de ajustarlo para que funcione con especificaciones anteriores.

Sugiera algunas alternativas viables y soluciones viables a la situación mencionada anteriormente.

Básicamente, su componente tiene algunas dependencias que se definen en los polyfills, ya sea directa o indirectamente. Si consideramos estas dependencias como nodos de un gráfico de dependencia, entonces tenemos el problema de que los gráficos son diferentes. Es posible que exista un nodo en ambos gráficos, pero se comporta de manera diferente (implementación anterior y más reciente del mismo function) y también es posible que falten algunos nodos que están presentes en un gráfico en otro. Por supuesto, puede poner algunos polyfills propios o algo similar, pero luego necesitaría mantener polyfills, lo que podría ser menos útil.

Un mejor enfoque en mi opinión es implementar un function, como

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

No estoy seguro de cómo implementar esto function, pero si hay uno functionque produce la versión adecuada o algunas diferencias evidentes entre las funcionalidades, puede implementar la función anterior en consecuencia. Y luego, ejecuta este código:

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

Sospecho que lo sabes Custom Elements v0 is deprecated at M70, and will be removed in M80, by February, 2020..

Lo que podría hacer es ir al Can I usesitio web y verificar las versiones de soporte del navegador para ver qué navegador debe cargar qué versión de elementos personalizados ...

Luego implemente lo siguiente para verificar el navegador y la versión y cargue el elemento personalizado correcto para el navegador deseado en consecuencia ( más aquí ) si no desea utilizar bibliotecas externas.

Si está de acuerdo con el uso de bibliotecas externas, intente Bowser para detectar la versión, la plataforma, 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.
}