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

9

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.

Konga Raju
fuente

Respuestas:

1

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
}
Lajos Arpad
fuente
Gracias por su respuesta, en este caso necesito mantener dos versiones de código de componentes, lo que sería un problema al agregar funciones y, a largo plazo, solucionar problemas se convertiría en un proceso agitado.
Konga Raju
@KongaRaju es un inconveniente, pero si logras reducir el espacio del problema específico de la versión y ampliar el área de código que se puede aplicar a ambas versiones, entonces puedes encontrar este problema menos inquietante de lo que piensas a primera vista.
Lajos Arpad
-1

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

Mac_W
fuente
Antes que nada, gracias por tu respuesta. ¿El verdadero problema radica en construir un componente una vez que detecta la versión del navegador? Agregar un cheque para detectar la versión del navegador sería un paso adicional.
Konga Raju
Parece que llegué lejos en suposiciones: mi idea anterior era construir 2 componentes separados y cargarlos en los navegadores apropiados.
Mac_W