# Shadow DOM
Aprenda hacking no AWS do zero ao herói com htARTE (HackTricks AWS Red Team Expert)! Outras formas de apoiar o HackTricks: * Se você quer ver sua **empresa anunciada no HackTricks** ou **baixar o HackTricks em PDF**, confira os [**PLANOS DE ASSINATURA**](https://github.com/sponsors/carlospolop)! * Adquira o [**material oficial PEASS & HackTricks**](https://peass.creator-spring.com) * Descubra [**A Família PEASS**](https://opensea.io/collection/the-peass-family), nossa coleção de [**NFTs**](https://opensea.io/collection/the-peass-family) exclusivos * **Junte-se ao grupo** 💬 [**Discord**](https://discord.gg/hRep4RUj7f) ou ao grupo [**telegram**](https://t.me/peass) ou **siga-me** no **Twitter** 🐦 [**@carlospolopm**](https://twitter.com/carlospolopm)**.** * **Compartilhe suas técnicas de hacking enviando PRs para os repositórios do GitHub** [**HackTricks**](https://github.com/carlospolop/hacktricks) e [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud).
## Informações Básicas Shadow DOM é parte do conjunto de recursos [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web\_Components), que visa permitir que desenvolvedores JS criem elementos personalizados reutilizáveis com sua funcionalidade encapsulada, separada do restante do código do site. Essencialmente, você pode usar o Shadow DOM para **isolar o HTML e CSS do seu componente do restante da página web**. Por exemplo, se você criar IDs de elementos em um shadow DOM, eles **não entrarão em conflito com IDs de elementos no DOM pai**. Quaisquer seletores CSS que você utilizar no seu shadow DOM serão aplicados apenas dentro do shadow DOM e não ao DOM pai, e quaisquer seletores que você utilizar no DOM pai não penetrarão dentro do shadow DOM. ```js // creating a shadow DOM let $element = document.createElement("div"); $shadowDomRef = $element.attachShadow({ mode: "open" }); // open or closed ``` Normalmente, quando você anexa um **"open" shadow DOM a um elemento**, você pode obter uma referência ao shadow DOM com **`$element.shadowRoot`**. No entanto, se o shadow DOM for anexado em modo **"closed"**, você **não pode obter uma referência** a ele dessa maneira. Mesmo após ler toda a documentação para desenvolvedores que pude encontrar, ainda estou um pouco incerto sobre o propósito do modo fechado. [De acordo com o Google](https://developers.google.com/web/fundamentals/web-components/shadowdom): > Existe outra variação de shadow DOM chamada modo "closed". Quando você cria uma árvore shadow **closed**, **o JavaScript externo não será capaz de acessar o DOM interno do seu componente**. Isso é semelhante a como elementos nativos como `