I've been using Web Components in production for years with great success. My guiding principles: - Avoid shadow dom unless it's a library. Stick with the lig

I've been using Web Components in production for years with great success. My guiding principles: - Avoid shadow dom unless it's a library. Stick with the light DOM and css system of your choice. - Use lit-html or similar for rendering - Use class properties for reactivity (add a render() call to setters, as needed) - Ignore attributes entirely. Just use properties. - Don't bother with composable components and slots. You generally don't need them - Use a nice router like vaadin or ionic or similar to hoist components and support deep linking - Let components maintain their own state. Structure the dom so that it's easy to grab state from a component with querySelector. If this doesn't work, I have a little state lib called ApplicationState[1] that works great. - Really think about what needs to be a component vs normal html. Don't overdo it with components. - Structure the app with high level "scene" components that map to URL deep links, and app components that you use to build the scenes. Scenes are targets of the router. [1] https://claytongulick.github.io/applicationstate/ https://claytongulick.github.io/applicationstate/