By Elson Correia
A theme provider is a special component that when wrapping your application content, will provide all the details your app needs to style itself like CSS variables and fonts.
It allows you to quickly change the way your website looks on-demand by simply changing some attribute values.
Why use Web Component?
Web components work with any library and frameworks so you can simply build once and use it with any application of any type.
It is my opinion that UI components should be project-independent so you can just create it once and use it with any project no matter the framework it uses. It is super annoying when you have to use a React or Angular compatible UI library, for example.
Web Component technology solves just that.
Enters CWCO
Native Web Component API is pretty robust and requires a lot of manual setup and control. Luckily there is CWCO which is a super powerful web component library that handles all the pain points with a lot of benefits and features like:
- It comes with context data handling built-in which will make it easier to provide theme data deeply into descendent components;
- Super easy to use and learn. CWCO is super vanilla and straightforward;
- CSS data binding is perfect because we can use data logic directly in our CSS to change it dynamically;
- The component template can be set right in the document body. CWCO, although a javascript library, allows you to build your app directly in HTML for SEO friendly content instead of hiding all content on the javascript side;
There are many more reasons why this library is an awesome web component solution. Check it out to learn more.
Watch and learn
I have prepared a small video that you can watch to learn more about this small project in detail.
The good thing about this component is that you can just use it with your React, Angular, Vue, Svelte, and even other web component projects like Lit.
[ Source Code ]
YouTube Channel: Before Semicolon Website: beforesemicolon.com