Lit is fantastic: tutorial series with Lit, UI5 Web Components, Bootstrap, MobX and TypeScript #2215
Replies: 3 comments
-
I have completed a (not so) basic demo of using Bootstrap via unsafeCSS (both bootstrap.min.css and bootstrap-icon.css, I could have used CSSStyleSheet/replaceSync, too, but unsafeCSS works great. In my sample I used the trickiest Bootstrap components: Modal, Spinner and Toast and everything worked great, responsive and fast. For the sake of fun I included MobX, too. After this experiment, I don't see any desire, as for me, to convert Bootstrap into a web component library. Honestly, I prefer this style, since then I can use Bootstrap both in Light DOM together with the old-fashioned legacy frameworks as well as in the Shadow DOM with the brilliant Lit. With this encapsulation I am pretty sure Bootsrap could even be combined with other CSS libraries in the same app, even in the same page. It may sound heretic, but I see no reason to make web component libraries any more: Bootstrap works so great with Lit even in Shadow DOM. |
Beta Was this translation helpful? Give feedback.
-
Yes it is useful indeed. |
Beta Was this translation helpful? Give feedback.
-
Thanks! I'm glad you like Lit! Join our Slack if you have not already! It's quite active and generally the central area to discuss Lit and WCs |
Beta Was this translation helpful? Give feedback.
-
A new Lit fan here, Hello to the Community!
I have completed my first series of evaluating web technologies for upcoming projects, and I am absolutely blown with Lit HTML and Lit Element. I was experimenting with using two component libraries Vaadin Fusion, SAP UI5 and Lit worked brutally well with each; yes, I know "a web component is a web component". Here is a tutorial series on converting a React application into a sleek 2021 modern, browser-native web component architecture using Lit, ViteJS (I could have used WebPack 5, too), TypeScript and in the final episode MobX: ui5-webcomponents-sample-lit. Just in case someone is interested in another ToDo app with these tool set/stack.
Beta Was this translation helpful? Give feedback.
All reactions