I had to partially take a step back from my original idea, because I wanted to integrate a CSS framework in my web components, but the two I was choosing between don’t fit. That’s why I chose to use only “vanilla” styles and JavaScript instead. Anyway, let me talk about them.
I’m a huge fan of Bootstrap: it’s, maybe, the first framework I’ve ever approached as a front-end developer, and I still use it when I can. I’ve never learned Tailwind CSS at 100%, and I joined the waitlist for a course already. So, trust me if I say that I’ve nothing against them.
Unfortunately, however, neither of them works well with web components: we have at least two problems here, starting from the shadow DOM. Then, if you want to use the <template> element, it’ll be even worse, because they simply won’t be applied at all.
I’m being honest, I didn’t know that importing a framework in a styled web component would have been unsuccessful. I never considered it. I realized it just trying: and it was a shame. Of course, there’s a way of doing something that can be considered similar, but CSSOM is indeed a total different thing.
Things get worse with Sass. While Bootstrap is based on it, and it can be customized using it, Tailwind CSS is not compatible with it. Then, if you ever try to integrate it with SCSS, you’ll end in a StackOverflow post where they explain to you that the @import rule can’t be replaced with @use.
You know what? Writing these lines I’m understanding that when I say I’m more into back-end development nowadays I’m not wrong. The point is «nowadays» means at least the last five years, actually, because of my job. But, aside from my experience, I can’t find a definitive solution.
I mean, having a custom reusable component that needs to be styled inline is far from being really “reusable”. You have two options: refactor at least the component style every time you need to use it, or build as many versions of the component as you need to implement. So, nothing “reusable” here.
This is something I learnt when I was working for a startup. They asked me to, let’s say, build an internal fork of Bootstrap that should have been used to customize a list of reusable components: I didn’t use the shadow DOM there, nor the <template> tag, but I realized that anyway it wouldn’t have worked as expected.
Top comments (0)