Novedades de Chrome 124

Pete LePage

A continuación, se muestran lo más destacado de Chrome 124:

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

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.