Actualización de los componentes web: más tiempo para actualizar a las APIs v1

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

Las APIs de Web Components v1 son un estándar de la plataforma web que se lanzó en Chrome, Safari, Firefox y, próximamente, en Edge. Millones de sitios usan las APIs de la versión 1, que llegan a miles de millones de usuarios todos los días. Los desarrolladores que usan las APIs de la versión preliminar v0 proporcionaron comentarios valiosos que influyeron en las especificaciones. Sin embargo, Chrome solo admitía las APIs de v0. Para garantizar la interoperabilidad, a fines del año pasado, anunciamos que estas APIs de borrador dejaron de estar disponibles y se programaron para quitarse a partir de Chrome 73.

Debido a que suficientes desarrolladores solicitaron más tiempo para migrar, las APIs aún no se quitaron de Chrome. Las APIs de borrador de la versión 0 ahora se eliminarán en Chrome 80, alrededor de febrero de 2020.

Esto es lo que debes saber si crees que podrías estar usando las APIs de la versión 0:

De vuelta al futuro: inhabilita las APIs de v0

Para probar tu sitio con las APIs de v0 inhabilitadas, debes iniciar Chrome desde la línea de comandos con las siguientes marcas:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

Deberás salir de Chrome antes de iniciarlo desde la línea de comandos. Si tienes instalado Chrome Canary, puedes ejecutar la prueba en Canary y mantener esta página cargada en Chrome.

Para probar tu sitio con las APIs de la versión 0 inhabilitadas, haz lo siguiente:

  1. Si usas macOS, navega a chrome://version para encontrar la ruta de acceso ejecutable de Chrome. Necesitarás la ruta de acceso en el paso 3.
  2. Sal de Chrome.

  3. Reinicia Chrome con las marcas de línea de comandos:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    Para obtener instrucciones sobre cómo iniciar Chrome con marcas, consulta Cómo ejecutar Chromium con marcas. Por ejemplo, en Windows, puedes ejecutar lo siguiente:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

  4. Para verificar que iniciaste el navegador correctamente, abre una pestaña nueva, abre la consola de DevTools y ejecuta el siguiente comando:

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    Si todo funciona como se espera, deberías ver lo siguiente:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

    Si el navegador informa que alguna de estas funciones o todas son verdaderas, significa que hay un problema. Asegúrate de cerrar Chrome por completo antes de reiniciarlo con las marcas.

  5. Por último, carga la app y prueba las funciones. Si todo funciona como se esperaba, ya está todo listo.

Usa los polyfills de v0

Los polyfills de Web Components v0 proporcionan compatibilidad con las APIs de v0 en navegadores que no proporcionan compatibilidad nativa. Si tu sitio no funciona en Chrome con las APIs de v0 inhabilitadas, es probable que no estés cargando los polyfills. Existen varias posibilidades:

  • No estás cargando los polyfills. En este caso, tu sitio debería fallar en otros navegadores, como Firefox y Safari.
  • Cargas los polyfills de forma condicional según el análisis de navegador. En este caso, tu sitio debería funcionar en otros navegadores. Ve a Carga los polyfills.

En el pasado, el equipo de Project Polymer y otros recomendaron cargar los polyfills de forma condicional según la detección de funciones. Este enfoque debería funcionar bien con las APIs de v0 inhabilitadas.

Instala los polyfills de v0

Los polyfills de Web Components v0 nunca se publicaron en el registro de npm. Puedes instalar los polyfills con Bower, si tu proyecto ya lo usa. También puedes instalarlo desde un archivo ZIP.

  • Para instalarlo con Bower, sigue estos pasos:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • Para instalar desde un archivo ZIP, descarga la versión 0.7.x más reciente de GitHub:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    Si instalas desde un archivo ZIP, deberás actualizar los polyfills de forma manual si sale otra versión. Es probable que quieras verificar los polyfills con tu código.

Carga los polyfills de v0

Los polyfills de Web Components v0 se proporcionan como dos paquetes separados:

webcomponents-min.js Incluye todos los polyfills. Este paquete incluye el polyfill de shadow DOM, que es mucho más grande que los otros polyfills y tiene un mayor impacto en el rendimiento. Usa este paquete solo si necesitas compatibilidad con shadow DOM.
webcomponents-lite-min.js Incluye todos los polyfills, excepto el shadow DOM. Nota: Los usuarios de Polymer 1.x deben elegir este paquete, ya que la emulación de Shadow DOM se incluyó directamente en la biblioteca de Polymer. Los usuarios de Polymer 2.x necesitan una versión diferente de los polyfills. Consulta la entrada de blog del proyecto de Polymer para obtener más detalles.

También hay polyfills individuales disponibles como parte del paquete de polyfills de componentes web. El uso de polyfills individuales por separado es un tema avanzado que no se aborda aquí.

Para cargar los polyfills de forma incondicional, haz lo siguiente:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

o:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

Si instalaste los polyfills directamente desde GitHub, deberás proporcionar la ruta en la que los instalaste.

Si cargas los polyfills de forma condicional según la detección de funciones, tu sitio debería seguir funcionando cuando se quite la compatibilidad con la versión 0.

Si cargas condicionalmente los polyfills con el análisis de navegador (es decir, cargas los polyfills en navegadores que no son Chrome), tu sitio fallará cuando se quite la compatibilidad con la versión 0 de Chrome.

Ayuda, No sé qué APIs estoy usando.

Si no sabes si usas alguna de las APIs de v0 o cuáles APIs usas, puedes consultar el resultado de la consola en Chrome.

  1. Si anteriormente iniciaste Chrome con las marcas para inhabilitar las APIs de v0, cierra Chrome y reinícialo de forma normal.
  2. Abre una nueva pestaña de Chrome y carga tu sitio.
  3. Presiona Control + Mayúsculas + J (Windows, Linux y ChromeOS) o Comando + Opción + J (Mac) para abrir la Consola de DevTools.
  4. Verifica el resultado de la consola para ver si hay mensajes de baja. Si hay muchos resultados de la consola, ingresa "Deprecation" en el cuadro Filter.
Ventana de la consola que muestra advertencias de baja

Deberías ver mensajes de baja para cada API de la versión 0 que uses. En el resultado anterior, se muestran mensajes para HTML Imports, Custom Elements v0 y Shadow DOM v0.

Si usas una o más de estas APIs, consulta Cómo usar los polyfills de v0.

Próximos pasos: Cómo dejar de usar la versión 0

Asegúrate de que se carguen los polyfills de v0 para garantizar que tu sitio siga funcionando cuando se quiten las APIs de v0. Te recomendamos que cambies a las APIs de Web Components v1, que son compatibles de forma más amplia.

Si usas una biblioteca de componentes web, como la biblioteca de Polymer, X-Tag o SkateJS, el primer paso es verificar si hay versiones más recientes de la biblioteca que admitan las APIs de v1.

Si tienes tu propia biblioteca o escribiste elementos personalizados sin una biblioteca, deberás actualizar a las APIs nuevas. Estos recursos pueden ayudarte:

En resumen

Las APIs de borrador de Web Components v0 dejarán de estar disponibles. Si te llevas una cosa de esta publicación, asegúrate de probar tu app con las APIs de v0 inhabilitadas y cargar los polyfills según sea necesario.

A largo plazo, te recomendamos que actualices a las APIs más recientes y que sigas usando Web Components.