Todo widget de terceiros carrega o mesmo risco: o CSS dele vaza para a sua página, ou o seu CSS vaza para ele, e alguém passa uma tarde no devtools. A Provedly renderiza dentro de um Shadow DOM, o que significa que o próprio navegador traça uma fronteira que seletores CSS comuns não atravessam em nenhuma direção. Este post explica o que essa fronteira faz, do que ela protege você e o punhado de coisas que ela deliberadamente não isola.
O que é Shadow DOM
Shadow DOM é um padrão do navegador que permite a um script anexar uma árvore DOM separada e encapsulada a um elemento. Estilos definidos dentro da árvore shadow valem só dentro dela; estilos definidos na página não entram. É o mecanismo por trás de elementos nativos como os controles de <video>, e está disponível em todos os navegadores atuais.
Quando o loader da Provedly roda, ele cria um elemento host, anexa um shadow root e renderiza a notificação, o contador ou a barra dentro desse root, com sua própria folha de estilos. Do ponto de vista da sua página, existe um elemento aparentemente vazio no fim do <body>.
<!-- what your page sees -->
<provedly-widget></provedly-widget>
#shadow-root
<style>
…widget styles…
</style>
<div class="toast">…</div>
Do que ele protege você
Seus resets não achatam o widget. Um * { box-sizing: border-box; margin: 0 } global ou um preflight do Tailwind não se aplica dentro do shadow root. A notificação fica igual em um site com resets agressivos e em um sem nenhum.
As classes do widget não colidem com as suas. O widget pode usar uma classe chamada .toast ou .badge e ela nunca vai casar com um elemento da sua página, e a sua regra .badge nunca vai casar com a do widget.
Suas regras !important continuam suas. Um tema que declara p { font-size: 18px !important } normalmente sobrescreveria qualquer parágrafo de um widget. Dentro de um shadow root, ela simplesmente não está no escopo.
O CSS do framework fica onde está. CSS Modules, styled-components, estilos scoped do Vue, estilos scoped do Svelte: nenhum deles interage com o widget, e o widget não interage com eles. É por isso que a instalação no Next.js, Webflow, WordPress e Shopify é a mesma tag de script; não há trabalho de folha de estilos por plataforma. Veja Como adicionar prova social a um app Next.js.
As fontes ficam previsíveis. A folha de estilos do próprio widget controla a tipografia dele, então uma fonte de destaque declarada no seu body não transforma uma notificação em manchete.
O que ele não isola, de propósito
O Shadow DOM delimita estilos. Ele não delimita o viewport, o contexto de empilhamento nem a interação do usuário, e há alguns pontos em que a sua página e o widget ainda dividem espaço.
| Compartilhado | Por que importa | O que fazer |
|---|---|---|
| Posição no viewport | A notificação é position: fixed e disputa espaço com seus outros elementos fixos |
Escolha um canto livre; use segmentação por dispositivo se o mobile estiver cheio |
| Ordem de empilhamento | O elemento host tem um z-index; um elemento da página com valor maior pode cobri-lo | Raro; normalmente é um overlay de tela cheia, que deveria cobri-lo de qualquer forma |
body { overflow: hidden } |
Não afeta o widget, mas seus próprios modais podem esperar o canto vazio | Nada, a menos que queira esconder a notificação durante modais; use segmentação por URL para rotas distintas |
| Propriedades CSS customizadas herdadas | Propriedades customizadas atravessam a fronteira shadow por design | O widget não depende de variáveis da página, então isso não tem efeito visível |
| Eventos de ponteiro | Clicar no selo abre a página de verificação, como qualquer link | Nada |
A única colisão prática são outros elementos com posição fixa: botões de chat, banners de cookies, botões fixos de adicionar ao carrinho. O Shadow DOM não consegue fazer duas coisas ocuparem o mesmo canto. Escolha posições para que isso não aconteça.
Estilizando o widget
Como você não consegue alcançar o interior do shadow root a partir da sua folha de estilos, os controles de design ficam no painel: cinco temas (Clean white, Deep ocean, Midnight, Electric violet, Sunset blaze), posição, estilo do avatar, formatos de nome e localização e, para as barras, layout, estilo dos dígitos, tamanho da fonte, largura máxima e cores dos botões. Isso é ao mesmo tempo uma restrição e um recurso. Garante que a pré-visualização no painel é o que os visitantes veem, em qualquer site, independentemente do CSS do site. Veja Como escolher um tema de notificação que combine com sua marca.
Se você precisa de algo que os controles não oferecem, a resposta não é furar o shadow root com ::part ou percorrendo o shadowRoot em JavaScript. Essas abordagens quebram na próxima versão do widget.
Impacto no desempenho
O shadow root é criado uma vez por carregamento de página. Os estilos dentro dele são processados uma vez e não disparam recálculo dos estilos da sua página, porque o navegador trata as duas árvores separadamente para fins de cascata. O pacote do widget tem cerca de 6 KB com gzip, carrega com async defer e renderiza elementos de posição fixa que não participam do seu layout, então não há layout shift a medir. Mais em Velocidade da página e scripts de prova social.
Depuração
No devtools, o widget aparece como o elemento host com um filho #shadow-root (open). Expanda-o para inspecionar a notificação como qualquer outro elemento. As versões atuais do Chrome e do Firefox mostram as árvores shadow por padrão; se o seu navegador as esconde, procure uma opção como "show user agent shadow DOM" nas configurações do devtools. Se a notificação não aparece de jeito nenhum, as causas comuns estão fora do shadow root: o domínio não está na lista de domínios permitidos do site, o widget não tem registros ou a página está excluída pela segmentação por URL.
Perguntas frequentes
O Shadow DOM funciona em todos os navegadores que meus visitantes usam?
O Shadow DOM é suportado em todos os navegadores evergreen há anos. A Provedly não atende navegadores sem ele.
Minha Content Security Policy pode bloquear os estilos inline dentro do shadow root?
Um style-src rígido sem 'unsafe-inline' pode afetar a forma como os estilos são aplicados dentro de um shadow root, dependendo do navegador. Se você usa uma política assim, teste o widget em staging e consulte a documentação para ver as entradas de CSP recomendadas para provedly.app.
O contador ao vivo usa o mesmo shadow root?
A notificação e o contador de um mesmo token de widget renderizam dentro do mesmo host. Uma barra CTA carregada de cta.js tem seu próprio host e seu próprio shadow root.
Veja o isolamento no seu próprio site com uma tag de script: instale grátis.