I decided to migrate Chūshō’s documentation from VuePress to VitePress the other day. It contains pages about the Vue components the library provides and naturally they include live examples of the components behavior. These examples have a completely different style than the rest of the documentation site though and it leads to conflicts. I could have just used iframes to scope them, but I want these examples to be interactive in the future and that would make the whole thing unnecessarily complicated. I use Tailwind for the demos, to craft various styles very quickly. Until now, I disabled the preflight plugin (their custom normalize.css) to avoid breaking VuePress’ layout. But removing this plugin caused other issues when using Tailwind classes. Migrating to VitePress introduced other problems and I thought it was the right time to find a better solution. I never really looked into Web Components; I knew that Shadow DOM allows to scope CSS within an element though, so I decided to look into that direction. It turns out this code isn’t enough to render the component children (the button in the example above). To do so, its necessary to explicitly define a slot Element within the component, like this. Now it renders the button; but something is off: it inherits the document styles, exactly what I wanted to avoid. I was confused by this behavior at first, but it makes sense: the content of the slot is part of the main document, and so it inherits the document styles. Technically the slot content is not part of the shadowRoot and therefore not scoped, only the DOM that is explicitly attached to it is. Adding styles The last thing to do is to add the stylesheet to be applied to the elements living inside the shadowRoot. And that’s it! The content is now scoped and the styles are not leaking to the rest of the page. Note that you can also use a style tag instead of an external stylesheet, or even go wild and use the r
