Los Shadow DOM te ofrecen una oportunidad inmejorable para tratar a algunos elementos de tu proyecto web de manera independiente del resto, sin tener que echar mano de tecnologías especiales como iFrames. Además, hoy en día ya son compatibles con todos los navegadores comunes y todas las técnicas de los componentes web modernos. Por lo tanto, si quieres crear un componente o área determinado de tu página web de manera totalmente independiente de las instrucciones de estilo y estructuras que afectan a todo el documento, los DOM ocultos representan una opción muy interesante y fácil de aplicar, sobre todo en proyectos complejos.
No obstante, no puedes usar cualquier elemento HTML como Shadow Host. Si, por ejemplo, intentas aplicar la técnica a un archivo de imagen, obtendrás un error y el correspondiente mensaje de error. Los Shadow DOM están restringidos a los siguientes componentes HTML:
- article
- aside
- blockquote
- body
- div
- footer
- h1, h2, h3, h4, h5, h6
- header
- main
- nav
- p
- section
- span