Na verdade, o Shadow DOM também é usado por vários elementos HTML nativos. Quando, por exemplo, você tiver um elemento <video> em uma página da Web, ele aparecerá como uma única tag, mas também exibirá controles para reproduzir e pausar o vídeo que não estão visíveis quando você inspecionar o elemento <video> nas ferramentas de desenvolvimento do navegador .
Esses controles são, na verdade, parte do Shadow DOM do elemento <video> e, portanto, ficam ocultos por padrão. Para revelar o ShadowDOM no Chrome, vá em “Preferências” dentro das configurações das ferramentas de desenvolvimento e marque a caixa de seleção “Mostrar ao usuário o DOM Shadow Agent”. Quando você inspecionar o elemento video novamente nas ferramentas dev, você verá e poderá inspecionar o Shadow DOM do elemento.
Artigos relacionados:
Ideia básica de como efetuar HTML linting com CSS
Como usar o “Inspecionar elemento” do Google Chrome
Obter o nome da tag de um elemento HTML utilizando jQuery
Como obter elementos HTML pelo nome utilizando jQuery
Identificar elemento ativo num documento HTML via JavaScript
Controle de tamanho de elementos HTML com CSS
Adicionar vídeo do Youtube como background de sua webpage
Como acessar a REST API JSON do WordPress
indeterminate – A propriedade pouco conhecida do HTML Checkbox e HTML Radio