webcomponents FTW

I'm still migrating my app from SPA to MPA but I don't see myself as a backward-looking person: I take this opportunity to implement web components in the large. Here are the stuff I learned.

First, you don't have to attach a shadowRoot to your webcomponent: you can directly append nodes to the instance. This is what is done in lite-youtube-embed. You may want to do that for several reasons, for instance using an external CSS without having to explicitly add a <link> tag in your components. You may want to use libraries that look for a node in your page in the whole DOM (like leaflet), and won't find node in the shadow dom. That's not something I would do by default as I really like the encapsulation provided by the shadow DOM. And "shadow DOM" is a very cool name by the way.

The other thing I was not aware of (though its totally logical) is that when an event is dispatched from the shadow DOM, its target will be the webcomponent itself. It can simplify a lot of thing.

I have a bit of concern about the flexibility, especially as there is multiple ways to pass data to a web component, and it's sometimes hard to decide which is the best way. I should spend some time to read best practices… However, over all, flexibility is a good thing.

It's a lot of work but I don't regret my decision to switch from NuxtJs SPA toward backend generated HTML + web components (for now). I really like the flexibility of manipulating the DOM directly and the encapsulation they provide to keep the code base less messy.