Psst… I’ve been keeping a secret. As part of my Web Components course on Frontend Masters, I built an entire guidebook on how to get started with Web Components. A Web Components 101. I spent hundreds of hours preparing the materials for the course and I’m excited to announce that today I’m making the guidebook public for everyone to get started with Web Components.
This guidebook is different! Most Web Component resources drop you right into the JavaScript parts. Ughck. That’s fine, I guess, but seeing the markup for a <my-button> component doesn’t make my heart or brain sing. It also doesn’t help me understand one of Web Components’ biggest mental hurdles: The Shadow DOM. To overcome this, I’ve intentionally designed my course to build out layer-by-layer from HTML→CSS→JavaScript, like how old timers learned the web development in the past.
Starting with <template> and <slot> –and most certainly with Web Component styling– you become familiar with the quirks of Shadow DOM first before writing your own from scratch. Following the navigation from left-to-right you’ll learn the ins-and-outs of Using → Styling → Writing the different flavors of Web Components. And because it’s part of the Web Platform, that knowledge will always be valuable.
HTML-first may seem overly basic, but I find that lots of new and experienced developers alike have never even tried using a Web Component off the shelf. That’s my favorite part of Web Components! You can use lots of Web Components without a build process or any kind of Webpack sorcery. A script tag + HTML and you’re using them! Web Components make it easy to (dependably) use other people’s code.
You can of course still watch my Web Components course on Frontend Masters. I recommend it if you’re an visual or auditory learner like myself. There’s also a bit more back-and-forth with the live audience and their questions.