Los problemas están relacionados a los distintos ecosistemas o frameworks ya que que estos no pueden coexistir entre sí, por lo que los Web Components al estar fundamentados en JavaScript puro, brinda más compatibilidad.
Es encapsular un código que se repite y que puede ser usado en diferentes partes o en otra aplicaciones.
"Los Web Components son primitivos de bajo nivel que te permiten definir tus propios elementos HTML".
Utilizamos Web Standards para construirlos y estan hechos con Web Apis que son:
Es el mas importante y permite definir nuestro componente como una etiqueta HTML que el navegador pueda entender.
<aside> 📌 Nota: existe una regla a la hora de nombrar nuestras etiquetas HTML personalizadas y es que deben tener un mínimo de 2 palabras separadas por un guion.
</aside>
Algunas etiquetas de HTML como <video> tienen cierto código en su interior que son parte de la etiqueta pero que esta encapsulada y no convive con el código exterior. Este código se encuentra en el shadow-root.
Esto es Shadow DOM, generar un código encapsulado y el código que exista dentro de la etiqueta no convive con el código de afuera.
Para hacer esto solo debemos de generar la instancia del Shadow DOM en modo "open". Luego agregar el componente al shadow dom, no al document.