Para redefinir uma seção de uma página que você criou, use uma redefinição CSS direcionada para marcação controlada, Shadow DOM para estilos de componentes isolados ou um iframe para um documento separado. Este guia mostra como escolher e visualizar o resultado em um Mac.

De que tipo de redefinição sua seção precisa?

A tarefa do leitor aqui é específica: dar a um painel de visualização aninhado sua própria tipografia, espaçamento e elementos gráficos abstratos, preservando a aparência da página ao redor. Você precisa ter acesso aos arquivos-fonte da página e permissão para editá-los.

Escolha o limite antes de escolher a declaração de redefinição. Os valores das propriedades CSS, o alcance dos seletores e os recursos do documento são questões distintas. O guia de decisão a seguir combina o comportamento documentado de redefinições CSS, Shadow DOM e quadros embutidos.

Seu requisito Opção prática Condição a considerar
Remover estilos selecionados de marcação aninhada comum Declarações direcionadas ou all Seletores externos ainda podem corresponder aos elementos da seção.
Manter os seletores internos separados dos seletores da página Shadow DOM com uma base interna explícita Ainda é preciso considerar os valores herdados.
Dar à seção seu próprio documento e configuração de folhas de estilo Um iframe Suas dimensões e seus recursos precisam ser configurados separadamente.

Para um pequeno painel de visualização criado por você, Shadow DOM é um ponto de partida útil. Ele fornece um limite para os seletores sem exigir um segundo arquivo HTML. Se você só precisa remover uma borda ou alterar a fonte de um título, declarações explícitas são mais simples do que introduzir um limite de componente.

Por que all: revert não redefine completamente uma seção aninhada?

A abreviação all altera as propriedades dos elementos aos quais corresponde. Ela exclui propriedades personalizadas, direction e unicode-bidi. Ela não cria um documento separado nem impede que outros seletores correspondam a esses elementos. Referência de all da MDN

As palavras-chave de redefinição também produzem bases diferentes. initial usa o valor inicial definido na especificação para cada propriedade. unset herda as propriedades que normalmente são herdadas e inicializa as demais. Em uma folha de estilos do autor, revert reverte a propriedade afetada para além dos estilos do autor; os valores herdados ainda podem vir do elemento pai. CSS Cascading and Inheritance Level 5

Por exemplo, redefinir a cor de uma seção não remove uma declaração de cor que corresponda diretamente a um parágrafo dentro dela. A MDN demonstra exatamente essa distinção: o parágrafo mantém a cor atribuída diretamente a ele mesmo quando o elemento pai usa revert. Portanto, uma redefinição em um contêiner não basta quando seletores de elementos descendentes são a origem da aparência indesejada. Exemplo da MDN de redefinição no elemento pai

Aplicar uma redefinição a todos os descendentes amplia seu alcance, mas também remove layout e formatação úteis. Com all: initial, até mesmo a exibição em bloco habitual do navegador para um elemento div é perdida, a menos que você a restaure. Use esse tipo de redefinição somente quando puder reconstruir deliberadamente a apresentação necessária. Exemplo de redefinição de widget na especificação

revert-layer tem outra finalidade: reverter uma propriedade através das camadas da cascata. É útil quando o problema está em uma camada específica de estilos, mas não estabelece um limite de componente. Reversão de camadas da cascata CSS

Crie um painel de visualização independente no seu Mac

Este exemplo completo cria uma interface externa escura e um painel aninhado claro com rótulos fictícios e duas formas CSS originais. Tudo está embutido: não são necessários downloads, pacotes, fontes externas ou arquivos de imagem.

No TextEdit, escolha File > New e depois Format > Make Plain Text. Cole o exemplo completo abaixo, salve-o como section-reset.html e escolha Use .html se solicitado. Estes são os passos documentados pela Apple para criar um arquivo HTML. Trabalhar com documentos HTML no TextEdit no Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Section reset demonstration</title>
  <style>
    body {
      margin: 0;
      padding: 32px;
      background: #202a36;
      color: #f2f5f8;
      font: 18px/1.6 Georgia, serif;
      letter-spacing: 1px;
    }
    main { max-width: 720px; margin: auto; }
    h2 { color: #bce8ff; text-transform: uppercase; }
    p { border-left: 4px solid #7db5cf; padding-left: 12px; }
    #panel-host { display: block; margin: 24px 0; }
  </style>
</head>
<body>
  <main>
    <h1>Shape workspace</h1>
    <p>Outer label Alpha</p>
    <div id="panel-host">
      <p>Preview unavailable. Use a browser supporting Shadow DOM.</p>
    </div>
    <h2>Outer label Beta</h2>
    <p>This paragraph belongs to the surrounding interface.</p>
  </main>
  <script>
    const host = document.getElementById("panel-host");
    if (typeof host.attachShadow === "function") {
      const root = host.attachShadow({ mode: "open" });
      const style = document.createElement("style");
      style.textContent = `
        .panel {
          all: initial;
          display: block;
          box-sizing: border-box;
          direction: ltr;
          unicode-bidi: normal;
          font: 16px/1.5 system-ui, sans-serif;
          color: #233344;
          background: #f4f7fa;
          padding: 24px;
          border: 2px solid #9db0c1;
          border-radius: 12px;
        }
        h2 { margin: 0 0 12px; font-size: 22px; }
        p { margin: 0 0 16px; }
        .shapes { display: flex; gap: 16px; flex-wrap: wrap; }
        .circle {
          width: 56px; height: 56px;
          border-radius: 50%; background: #386f91;
        }
        .bar {
          width: 104px; height: 56px;
          border-radius: 8px; background: #c98252;
        }
      `;
      const panel = document.createElement("section");
      panel.className = "panel";
      const heading = document.createElement("h2");
      heading.textContent = "Panel Delta";
      const text = document.createElement("p");
      text.textContent = "Circle and rounded bar";
      const shapes = document.createElement("div");
      shapes.className = "shapes";
      shapes.setAttribute("aria-hidden", "true");
      for (const name of ["circle", "bar"]) {
        const shape = document.createElement("div");
        shape.className = name;
        shapes.append(shape);
      }
      panel.append(heading, text, shapes);
      root.append(style, panel);
    }
  </script>
</body>
</html>

Abra o arquivo salvo no navegador do Mac. O resultado esperado é um painel claro com um título em maiúsculas e minúsculas e um parágrafo sem borda. Fora dele, o título permanece em maiúsculas e azul, e os parágrafos mantêm suas bordas à esquerda. Esses são resultados esperados do exemplo, não medições relatadas de testes em navegadores.

O script anexa uma raiz de sombra ao elemento hospedeiro, que não tem outra função, e cria o painel dentro dessa raiz. A folha de estilos pertence à árvore de sombra, então seus seletores comuns para títulos e parágrafos se aplicam internamente. Os seletores comuns de títulos e parágrafos do documento não alcançam esses elementos internos. Isso segue o padrão de estilização do Shadow DOM documentado pela MDN.

O .panel interno fornece a segunda parte da solução: uma base explícita. Os limites de sombra separam a correspondência de seletores, enquanto a herança continua funcionando pela árvore de elementos renderizados. Redefinir o contêiner interno impede que a fonte serifada e o espaçamento entre letras da página ao redor sejam herdados como base padrão. A especificação CSS Shadow atual descreve esse modelo de herança; ela ainda é um rascunho do editor. CSS Shadow Module Level 1

O que ainda atravessa ou afeta o limite?

O elemento hospedeiro continua sendo parte do documento ao redor. As regras da página podem alterar sua margem, largura ou exibição, e um elemento ancestral ainda determina quanto espaço o painel recebe. Mantenha o posicionamento do elemento hospedeiro sob controle da folha de estilos da página e a aparência interna do painel sob controle da folha de estilos de sombra. Essa divisão segue a distinção documentada entre um hospedeiro de sombra e sua árvore interna. Guia de escopo CSS

As propriedades personalizadas também exigem um contrato deliberado. all não as limpa. Este exemplo não usa propriedades personalizadas herdadas, então uma variável externa não pode alterar as cores escolhidas por meio de uma referência var(). Se você introduzir variáveis de tema mais tarde, defina quais nomes o componente aceita e forneça valores padrão internos. Exclusões da redefinição na MDN

Mantenha o novo conteúdo do painel dentro da raiz de sombra quando quiser o mesmo limite para os seletores. O conteúdo distribuído por slots tem relações de estilo diferentes porque se origina na árvore de luz; adicionar slots altera as premissas deste exemplo. Explicação de CSS Shadow sobre slots e relações entre árvores

Shadow DOM também não é um comando para redefinir recursos. O exemplo evita completamente dependências de recursos. Se o requisito for um documento HTML separado com suas próprias referências a folhas de estilo, use a abordagem com quadro abaixo.

Quando você deve usar um iframe?

Um iframe incorpora outro documento. Isso o torna adequado para uma visualização com estilo independente, cuja configuração de documento deve ser separada da página ao redor. O padrão HTML define src para um recurso referenciado e srcdoc para um documento embutido. Padrão HTML: o elemento iframe

Para uma configuração local com dois arquivos, crie um segundo arquivo HTML completo chamado panel.html contendo o painel e sua folha de estilos. Substitua o elemento hospedeiro e seu script por um iframe que faça referência a esse arquivo. O trecho a seguir é para integração, não é um documento independente:

<iframe
  title="Shape panel preview"
  src="panel.html"
  style="display:block;width:100%;height:280px;border:0">
</iframe>

Os nomes de arquivo aqui são nomes usados nos exemplos locais. Crie o segundo arquivo real antes de usar o trecho. O tamanho externo do quadro pertence à página que o contém; a página incorporada fornece sua apresentação interna. Considere 280px uma altura inicial ilustrativa e verifique se conteúdos mais longos cabem, em vez de presumir que caberão.

Se você escolher srcdoc, lembre-se de que os URLs relativos dos recursos são resolvidos com base no URL da página que incorpora o conteúdo. Portanto, o conteúdo de um documento embutido não recebe automaticamente uma base de recursos independente. A MDN também documenta que srcdoc sem suporte recorre a src. Referência de atributos de iframe da MDN

Verifique a compatibilidade e diagnostique estilos inesperados

A MDN indica que tanto attachShadow() básico quanto a propriedade all estão amplamente disponíveis nos navegadores desde janeiro de 2020. Isso não garante o suporte a todas as opções mais recentes desses recursos. Este exemplo usa o modo básico open e mantém uma mensagem de fallback visível quando Shadow DOM não está disponível. MDN: attachShadow(), MDN: all

@scope é outra forma compatível de limitar onde um conjunto de seletores se aplica, mas não interrompe a herança nem impede que regras globais não relacionadas alcancem a subárvore. A MDN indica que passou a estar disponível nos navegadores atuais desde março de 2026, com limitações nos navegadores mais antigos. Use-o quando a organização dos seletores atender ao requisito; mantenha Shadow DOM ou um quadro quando precisar dos respectivos limites. MDN: @scope

Siga esta sequência de diagnóstico depois de editar o exemplo:

  1. Se o arquivo exibir o texto-fonte, confirme que a extensão salva é .html e abra-o no navegador.
  2. Se a mensagem de fallback continuar aparecendo, confirme que o JavaScript está sendo executado e que o navegador oferece suporte a attachShadow().
  3. Se o painel não estiver correto, confirme que o conteúdo foi acrescentado à raiz de sombra e inspecione a base interna e a folha de estilos.
  4. Se a interface ao redor mudar, inspecione as alterações na folha de estilos do documento e nas regras do elemento hospedeiro.
  5. Se o conteúdo não couber mais, verifique as dimensões do elemento hospedeiro ou do quadro antes de alterar a tipografia.

Escolha o limite mais simples que atenda à tarefa: CSS direcionado para uma correção controlada, Shadow DOM com uma base definida para um painel isolado ou um iframe para um documento separado. Deixe explícitos o posicionamento, os estilos internos e as referências a recursos para que a seção possa mudar sem exigir uma reformulação do que está ao redor.

Fontes