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.
<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.