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 finde 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 encapsualation they provide to keep the code base less messy.
Posted on 2022-10-26 at 00:15Previous Back