This is a solution to the Pricing component with toggle challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
I wanted to take a shot at using raw web components and this was my first attempt. Conclusion: I dont like them - yet.
Styling web components is trick and a pain. There isnt a clear or easily manageable way to have separate style, markup, and js files that combine together. React is essentially a way to make web components easier to manage but for some dumb reason leaves out the custom tag names (ie the whole damn point of custom components). Angular is a more fully featured wrapper for these components but comes with a ton of overhead.
I think I'll give web components another shot at a later time but for now I'm throwing in the towel.
Oh, and the particular design is a pain in the ass IMO. The colors in the style-guide do not clearly represent their elements and its just in general a difficult to look at design.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Control the toggle with both their mouse/trackpad and their keyboard
As far as I got on the desktop before I threw in the towel.
- Solution URL: Github
- Live Site URL: Github Pages
I started with just experimenting with web components and trying to come up with a manageable way to work with them. I hate mixing concerns by having styles, markup, and JS in a single file. I didnt really come up with a good way to manage it all.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Web Components
Web components have a good ways to go before I'm convinced to use them professionally. There needs to be a clear and built in way to load external html and css files to render.