Fecha de publicación: 28 de julio de 2026
Chrome 151 ya se está lanzando, y en esta publicación, se comparten algunas de las funciones clave de la versión. Lee las notas de la versión completas de Chrome 151.
Aspectos destacados de esta versión:
- El elemento de capacidad
<usermedia>proporciona un control declarativo y activado por el usuario para las transmisiones de cámara y micrófono. - La asignación de ranuras de DOM secundario declarativo permite que los componentes web usen la asignación de ranuras manual sin JavaScript imperativo.
- Las métricas de rendimiento de las navegaciones suaves y la interacción hacen un seguimiento de la latencia y los cambios de ruta basados en la interacción en aplicaciones de una sola página.
Elemento de capacidad: <usermedia> MVP
El elemento <usermedia> es el más reciente que se lanzó en el paquete de elementos de capacidad, después de <geolocation>. Esta transición de la propuesta original <permission> (parte de la iniciativa PEPC) permite que el navegador controle las complejidades y los comportamientos únicos de diferentes capacidades de hardware de manera más eficaz. Si bien la propuesta inicial se centró principalmente en la administración de estados de permisos, como permitir o denegar, los elementos de capacidad funcionan como mediadores de datos.
El elemento <geolocation> proporciona un objeto de ubicación a tu sitio, y <usermedia> administra todo el flujo para el acceso a la cámara y el micrófono. Captura la intención del usuario, administra la solicitud del navegador y entrega el objeto MediaStream a la aplicación. Este cambio elimina la necesidad de llamadas getUserMedia() separadas, simplifica la implementación y garantiza que el navegador tenga un indicador confiable de la intención del usuario.
Obtén más información en Presentamos el elemento HTML <usermedia>.
DOM secundario declarativo: atributo shadowrootslotassignment
Chrome 151 agrega compatibilidad con el atributo shadowrootslotassignment en los elementos <template>. Esto te permite compilar raíces secundarias declarativas que usan la asignación de ranuras manual directamente en tu HTML.
Hasta ahora, la asignación de ranuras manual solo estaba disponible de forma imperativa. Con esta actualización, puedes especificar shadowrootslotassignment="manual" en tu plantilla de raíz secundaria.
El atributo acepta named (el comportamiento predeterminado) y manual, y se refleja en la propiedad shadowRootSlotAssignment en HTMLTemplateElement. Para obtener más detalles, consulta la documentación de HTMLTemplateElement.shadowRootSlotAssignment en MDN.
Este atributo ya está disponible en Firefox y en la versión beta de Safari 27, por lo que pronto estará disponible en Baseline.
Métricas de rendimiento de las navegaciones suaves y la interacción
Chrome 151 expande la línea de tiempo de rendimiento web con la introducción de dos tipos nuevos de PerformanceEntry: soft-navigation y interaction-contentful-paint. Estas entradas ayudan a los desarrolladores a hacer un seguimiento del rendimiento y la latencia basados en la interacción en aplicaciones de una sola página (SPA), basándose en métricas establecidas de Core Web Vitals, como Largest Contentful Paint (LCP) y Interaction to Next Paint (INP).
En una SPA, las transiciones de ruta basadas en JavaScript no activan una carga de página tradicional del navegador. La entrada soft-navigation captura estos cambios de estado del historial del mismo documento iniciados por las interacciones del usuario. Cuando se produce una navegación suave, el navegador establece un nuevo origen de tiempo, lo que te permite atribuir con precisión los datos de rendimiento posteriores a la ruta de SPA activa en lugar de la URL del documento inicial.
La entrada interaction-contentful-paint mide las nuevas pinturas de contenido dentro de las regiones DOM modificadas por una interacción del usuario. Esto proporciona visibilidad de la latencia de carga de la interacción, incluso cuando las actualizaciones de contenido dependen de operaciones asíncronas, como las solicitudes fetch().
Puedes observar estas entradas nuevas en tu aplicación con un PerformanceObserver. El siguiente fragmento de código registra las entradas de navegación suave en la consola, incluidas las navegaciones suaves anteriores en esta página con la opción almacenada en búfer:
const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });
Para obtener más información sobre la implementación y la medición de las navegaciones de SPA, lee la documentación de navegaciones suaves en Chrome para desarrolladores.
Lecturas adicionales
Esto solo abarca algunos aspectos destacados clave. Consulta los siguientes vínculos para ver los cambios adicionales en Chrome 151:
- Notas de la versión de Chrome 151.
- Actualizaciones de ChromeStatus.com para Chrome 151.
- Calendario de lanzamientos de Chrome.
Suscribirse
Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo. También puedes seguirnos en X o LinkedIn para ver artículos y publicaciones de blog nuevos.
En cuanto se lance Chrome 152, estaremos aquí para contarte las novedades de Chrome.