Con el término Light DOM nos referimos al marcado, las etiquetas HTML, que hay dentro de las etiquetas de componentes "Custom elements".
El light dom lo puedes ver cuando usas un componente. Lo podemos ver en este código:
<list-component>
<span>Elemento 1</span>
<span>Elemento 2</span>
<span>Elemento 3</span>
</list-component>
Todos los span que hay dentro de <list-component> son el denominado Light DOM. A veces en español podemos referirnos a este bloque como el DOM Local.
El Light DOM se diferencia con el Shadow DOM en que no está encapsupado. Esto quiere decir que:
- El CSS global del documento HTML puede llegar a afectar al light dom. Mientras que el CSS global en principio no puede afectar al shadow DOM
- Consultas con document.querySelector pueden llegar a seleccionar elementos del Ligth DOM pero no puedes llegar a seleccionar elementos del shadow DOM.
En el desarrollo de custom elements puedes acceder al light dom del componente y operar con él, incluso puedes reutilizar partes del light dom dentro del shadow dom por medio de slots.
A veces resulta muy útil trabajar con el light DOM justamente porque quieres que les afecten los estilos CSS globales al componente, porque quieres manipularlo desde fuera, creando marcado desde otras librerías o desde el lado del servidor, que luego podrán usar los componentes custom elements.
Algo para lo que resulta también muy útil hacer uso del light dom es para mejorar el SEO de las páginas basadas en Web Components.