Estes são os destaques do Chrome 124:
- Há duas novas APIs que permitem que o shadow DOM declarativo seja usado no JavaScript.
- Você pode usar streams no Web Sockets.
- As transições de visualização ficam um pouco melhores.
- E há muito mais.
Quer ver a apresentação completa? Confira as notas da versão do Chrome 124.
Usar o shadow DOM declarativo em JavaScript
Há duas novas APIs que permitem que o shadow DOM declarativo seja usado no JavaScript.
setHTMLUnsafe()
é semelhante a innerHTML
e permite definir o HTML interno de
um elemento para a string fornecida. Isso ajuda quando você tem HTML que inclui um shadow DOM declarativo, como esse.
<my-custom-element>
<template shadowrootmode="open">
<style>
:host {
display: block;
color: yellow;
}
</style>
Hello, <slot></slot>
</template>
</my-custom-element>
Se você usar apenas innerHTML
, o navegador não vai analisá-lo corretamente e não
há um shadow DOM. No entanto, com setHTMLUnsafe()
, o shadow DOM é criado e o
elemento é analisado conforme o esperado.
const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);
A outra API é parseHTMLUnsafe()
e funciona de maneira semelhante a
DOMParser.parseFromString()
.
Essas duas APIs são não seguras, o que significa que não realizam nenhuma limpeza de entrada. Por isso, certifique-se de que o que você alimentá-los é seguro. Em uma próxima versão, esperamos ver uma versão que ofereça limpeza da entrada.
Por fim, ambas as APIs já são compatíveis com a versão mais recente do Firefox e do Safari.
API WebSocket Stream
Os WebSockets são uma ótima maneira de enviar dados entre o navegador do usuário e o servidor sem precisar de uma pesquisa. Isso é ótimo para aplicativos de bate-papo, em que você quer lidar com informações assim que elas chegam, por exemplo.
Mas e se os dados chegarem mais rápido do que você consegue suportar?
Isso é chamado de pressão de retorno e pode causar algumas sérias dores de cabeça para você. Infelizmente, a API WebSocket não tem uma boa maneira de lidar com a pressão de retorno.
A API WebSocket Stream fornece a capacidade de streams e soquetes da Web, o que significa que a capacidade de retorno pode ser aplicada sem nenhum custo extra.
Comece construindo um novo WebSocketStream
e transmitindo o URL do servidor 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);
}
Em seguida, aguarde a conexão ser aberta, o que resulta
em um ReadableStream
e um WritableStream
. Ao chamar o
método ReadableStream.getReader()
, você recebe um ReadableStreamDefaultReader
do qual pode read()
usar dados até que o stream seja concluído.
Para gravar dados, chame o método WritableStream.getWriter()
, que fornece um
WritableStreamDefaultWriter
, em que você pode write()
dados.
Melhorias nas transições de visualização
Estou empolgado com os recursos de transições de visualização. Há dois novos recursos no Chrome 124 projetados para facilitar essas transições.
O evento pageswap
é disparado no objeto da janela de um documento quando uma navegação
substitui o documento por um novo.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
E o bloqueio de renderização de documentos, que permite bloquear a renderização de um documento até que o conteúdo essencial seja analisado, garantindo uma primeira exibição consistente em todos os navegadores.
E muito mais.
Claro, há muito mais.
disallowReturnToOpener
indica ao navegador que ele não precisa mostrar um botão na janela picture-in-picture que permite que o usuário volte à guia que o abre.Os contêineres de rolagem com foco no teclado melhoram a acessibilidade, tornando esses contêineres focalizáveis usando a navegação de foco sequencial.
E a instalação universal permite que os usuários instalem qualquer página, mesmo aquelas que não atendem aos critérios atuais de PWA.
Leia mais
Isso aborda apenas alguns destaques importantes. Acesse os links a seguir para ver outras mudanças no Chrome 124.
- Notas de lançamento do Chrome 124
- Novidades do Chrome DevTools (124)
- Atualizações do ChromeStatus.com para o Chrome 124
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
Fazer inscrição
Para ficar por dentro, inscreva-se no canal do YouTube para desenvolvedores do Chrome. Você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.
Meu nome é Pete LePage, e assim que o Chrome 125 for lançado, estaremos aqui para dizer as novidades do Chrome.