A continuación, se muestran lo más destacado de Chrome 124:
- Hay dos APIs nuevas que permiten que se aplique el shadow DOM declarativo se usan desde JavaScript.
- Puedes usar transmisiones en Web Sockets.
- Las transiciones de vistas mejoran un poco.
- Hay mucho más.
¿Quieres ver el resumen completo? Consulta la Notas de la versión de Chrome 124.
Cómo usar shadow DOM declarativo en JavaScript
Hay dos APIs nuevas que permiten usar el shadow DOM declarativo desde JavaScript:
setHTMLUnsafe()
es similar a innerHTML
y te permite configurar el HTML interno de
un elemento a la cadena proporcionada. Esto es útil cuando tienes
HTML que incluye un shadow DOM declarativo, como este.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
Si solo usas innerHTML
, el navegador no lo analizará correctamente y habrá
no hay shadow DOM. Sin embargo, con setHTMLUnsafe()
, se crea tu shadow DOM y el
se analiza como esperas.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
La otra API es parseHTMLUnsafe()
y funciona de manera similar a
DOMParser.parseFromString()
Ambas APIs son no seguras, lo que significa que no realizan ninguna entrada y la limpieza de datos. Por lo tanto, debes asegurarte de que todo lo que les alimentes sea seguro. En una próxima versión, esperamos ver una versión que sí brinde limpieza. de la entrada.
Por último, ambas APIs ya son compatibles con la versión más reciente del Firefox y Safari
API de WebSocket Stream
Los WebSockets son una excelente manera de enviar y recibir datos entre la red del navegador y servidor sin tener que depender del sondeo. Esto es ideal para como apps de chat, donde quieres tratar la información tan pronto como entra en juego.
Pero ¿qué sucede si los datos llegan más rápido de lo que puedes manejar?
Esto se denomina contrapresión y puede causarte dolores de cabeza graves. Por desgracia, la API de WebSocket no tiene una forma adecuada presión.
La API de WebSocket Stream ofrece la potencia de transmisiones y tomacorrientes web, lo que significa que la contrapresión puede ser sin ningún costo adicional.
Para comenzar, construye un WebSocketStream
nuevo y pásale la URL de la
Servidor de WebSocket.
const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();
while (true) {
const {value, done} = await reader.read();
if (done) {
break;
}
const result = await process(value);
await writer.write(result);
}
Luego, esperas a que se abra la conexión, lo que da como resultado
en un ReadableStream
y un WritableStream
. Al llamar al
ReadableStream.getReader()
, obtienes un ReadableStreamDefaultReader
.
de las que puedes read()
datos hasta que finalice la transmisión.
Para escribir datos, llama al método WritableStream.getWriter()
, que te proporciona un
WritableStreamDefaultWriter
, donde luego puedes write()
datos.
Mejoras en las transiciones de vistas
Estoy entusiasmado con las funciones de transiciones de vistas y que se presentarán dos funciones nuevas: en Chrome 124 para facilitar las transiciones de vistas.
El evento pageswap
se activa en el objeto de ventana de un documento cuando una navegación
reemplazará el documento por uno nuevo.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
Bloqueo de renderización de documentos, que te permite bloquear la renderización de un documento hasta que se analice el contenido crítico, asegurándose de que un primer procesamiento de imagen sea coherente. en todos los navegadores.
Y mucho más.
Por supuesto, hay mucho más.
disallowReturnToOpener
sugerencias al navegador de que no debería mostrar un botón en el modo de pantalla en pantalla que le permite al usuario volver a la pestaña del abridor.Contenedores de desplazamiento enfocados con el teclado mejora la accesibilidad al hacer que los contenedores de desplazamiento sean enfocables mediante secuencias la navegación de enfoque.
La instalación universal permite a los usuarios instalar cualquier página, incluso aquellas que no que cumplan con los criterios actuales de AWP
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para cambios adicionales en Chrome 124.
- Notas de la versión de Chrome 124
- Novedades de las Herramientas para desarrolladores de Chrome (124)
- Actualizaciones de ChromeStatus.com para Chrome 124
- Lista de cambios del repositorio de código fuente de Chromium
- 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.
Soy Pete LePage, y apenas se lance Chrome 125, estaremos aquí para contarte las novedades de Chrome.