In reality, building anything complex is a huge pain using web components, particularly because it is hard to author them with appropriate level of styling API and accessibility support. In my experience, web components are fantastic for consumers but terrible for the authors.

Still, the advantages are clear: they don’t need any special runtime and can be used with other JS frameworks.

Another thing in favor of web components is support for custom registries which make gradual migration from one version to another trivial. AFAIK, no JS framework has an equivalent of custom registries.

Try keeping them in the light dom.

Everything works like normal html + css, but you get all the benefits of reusability and encapsulated script logic.

Lit-html (the library, not the framework) gives this approach super rendering speed too.