Atualização dos Web Components: mais tempo para fazer upgrade para as APIs v1

As APIs Web Components v1 são um padrão da plataforma da Web que foi enviado no Chrome, Safari, Firefox e, em breve, no Edge. As APIs v1 são usadas por literalmente milhões de sites, alcançando bilhões de usuários diariamente. Os desenvolvedores que usaram as APIs do rascunho v0 enviaram feedback valioso que influenciou as especificações. No entanto, as APIs v0 tinham suporte apenas no Chrome. Para garantir a interoperabilidade, no final do ano passado, anunciamos que essas APIs de rascunho foram descontinuadas e programadas para remoção a partir do Chrome 73.

Como um número suficiente de desenvolvedores pediu mais tempo para migrar, as APIs ainda não foram removidas do Chrome. As APIs do rascunho v0 agora serão removidas do Chrome 80, por volta de fevereiro de 2020.

Confira o que você precisa saber se acredita que está usando as APIs v0:

• Teste seu site com as APIs v0 desativadas. Se o site funcionar como esperado, parabéns! Pronto. Consulte De volta ao futuro: como desativar as APIs v0 para ver instruções.
• Se você estiver usando a biblioteca Polymer v1 ou v2: siga as instruções publicadas anteriormente pela equipe do Polymer.
• Se você estiver usando o shadow DOM v0, elementos personalizados v0 ou importações de HTML, será necessário carregar alguns polyfills. Consulte Usar os polyfills da v0.
• Se você não tiver certeza do que está usando, não se preocupe. Consulte Ajuda! Não sei quais APIs estou usando.

Voltando ao futuro: como desativar as APIs v0

Para testar seu site com as APIs v0 desativadas, inicie o Chrome na linha de comando com as seguintes flags:

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

É necessário sair do Chrome antes de iniciá-lo na linha de comando. Se você tiver o Chrome Canary instalado, poderá executar o teste no Canary enquanto mantém essa página carregada no Chrome.

Para testar seu site com as APIs v0 desativadas:

1. Se você estiver usando o Mac OS, navegue até chrome://version para encontrar o caminho executável do Chrome. Você vai precisar do caminho na etapa 3.
2. Saia do Chrome.

3. Reinicie o Chrome com as flags de linha de comando:

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

   Para instruções sobre como iniciar o Chrome com flags, consulte Executar o Chromium com flags. Por exemplo, no Windows, você pode executar:

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

4. Para verificar se você iniciou o navegador corretamente, abra uma nova guia, abra o console do DevTools e execute o seguinte 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'));
   

   Se tudo estiver funcionando como esperado, você verá:

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

   Se o navegador informar "verdadeiro" para qualquer um ou todos esses recursos, algo está errado. Verifique se você desativou completamente o Chrome antes de reiniciar com as flags.

5. Por fim, carregue o app e teste os recursos. Se tudo funcionar como esperado, você terminou.

Usar os polyfills da v0

Os polifills do Web Components v0 oferecem suporte às APIs v0 em navegadores que não oferecem suporte nativo. Se o site não funcionar no Chrome com as APIs v0 desativadas, provavelmente você não está carregando os polyfills. Há várias possibilidades:

• Você não está carregando os polyfills. Nesse caso, seu site vai falhar em outros navegadores, como Firefox e Safari.
• Você está carregando os polyfills de forma condicional com base no sniffing do navegador. Nesse caso, seu site deve funcionar em outros navegadores. Pule para Carregar os polyfills.

No passado, a equipe do Projeto Polymer e outras pessoas recomendavam carregar os polyfills condicionalmente com base na detecção de recursos. Essa abordagem deve funcionar bem com as APIs v0 desativadas.

Instalar os polyfills da v0

Os polyfills do Web Components v0 nunca foram publicados no registro do npm. É possível instalar os polyfills usando o Bower, se o projeto já estiver usando o Bower. Também é possível instalar usando um arquivo ZIP.

• Para instalar com o Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Para instalar usando um arquivo ZIP, faça o download da versão 0.7.x mais recente do GitHub:

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

  Se você instalar usando um arquivo zip, será necessário atualizar manualmente os polyfills se outra versão for lançada. Talvez você queira verificar os polyfills no seu código.

Carregar os polyfills v0

Os polyfills do Web Components v0 são fornecidos como dois pacotes separados:

Também há polyfills individuais disponíveis como parte do pacote de polyfills de componentes da Web. O uso de polyfills individuais separadamente é um tópico avançado, não abordado aqui.

Para carregar os polyfills incondicionalmente:

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

ou:

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

Se você instalou os polyfills diretamente do GitHub, vai precisar fornecer o caminho em que instalou os polyfills.

Se você carregar condicionalmente os polyfills com base na detecção de recursos, seu site continuará funcionando quando o suporte à v0 for removido.

Se você carregar condicionalmente os polyfills usando a detecção de navegador (ou seja, carregando os polyfills em navegadores que não são o Chrome), seu site vai falhar quando o suporte à v0 for removido do Chrome.

Preciso de ajuda! Não sei quais APIs estou usando.

Se você não souber se está usando alguma das APIs v0 ou quais você está usando, verifique a saída do console no Chrome.

1. Se você já tiver iniciado o Chrome com as flags para desativar as APIs v0, feche o Chrome e reinicie normalmente.
2. Abra uma nova guia do Chrome e carregue o site.
3. Pressione Control + Shift + J (Windows, Linux, ChromeOS) ou Command + Option + J (Mac) para abrir o Console do DevTools.
4. Verifique se há mensagens de descontinuação na saída do console. Se houver muita saída do console, insira "Deprecation" na caixa Filter.

Você vai notar mensagens de descontinuação para cada API v0 que estiver usando. A saída acima mostra mensagens para importações de HTML, elementos personalizados v0 e Shadow DOM v0.

Se você estiver usando uma ou mais dessas APIs, consulte Usar os polyfills v0.

Próximas etapas: como sair da v0

Confira se os polyfills v0 estão sendo carregados para garantir que o site continue funcionando quando as APIs v0 forem removidas. Recomendamos migrar para as APIs Web Components v1, que têm suporte amplo.

Se você estiver usando uma biblioteca de componentes da Web, como a biblioteca Polymer, X-Tag ou SkateJS, a primeira etapa é verificar se há versões mais recentes da biblioteca disponíveis que ofereçam suporte às APIs v1.

Se você tiver sua própria biblioteca ou tiver criado elementos personalizados sem uma biblioteca, será necessário atualizar para as novas APIs. Estes recursos podem ajudar:

• Novidades nos elementos personalizados
• Novidades no Shadow DOM v1

Resumo

As APIs de rascunho do Web Components v0 serão desativadas. Se você tirar uma coisa desta postagem, verifique se o app está com as APIs v0 desativadas e carregue os polyfills conforme necessário.

A longo prazo, recomendamos que você faça upgrade para as APIs mais recentes e continue usando os Componentes da Web.