Ian J. MacIntosh

Tutorial Review: Creating Native Web Components

I've been interested in Web Components since I'd first heard of them. I'd previously worked with building sites that had used the idea of reuasable components, but there was a bunch of messy infrastructure sitting on top of it. We didn't have a sophisticated way of sharing dependencies, the term "component" was kind of vague and it wasn't clear what its relationship with our CMS or our web app was. What about page layouts? Is there a tool that we can use to drag and drop these components around? Is that tool part of our CMS? What about colors and typography, are those controlled at the page level or at the component level?

Those are just some questions I'm able to remember off the top of my head, but I remember having a feeling that using reusable components was going to be useful. The idea of having some of these more persnickety questions answered by someone else is really appealing. I'm sure it'll be "It depends" on a lot of these, but it's very attractive to have someone else (or an entire community of web developers) muck around in that space of experimenting and let me know later what it depends on is.

And so many years later, when I saw a tutorial show up in my newsfeed where I'd get an opportunity to experiment with web components, I figured I'd jump on the opportunity. This article is my write-up of how it went.

Initial Setup Freakout

Ahhhh! Should I use neovim and get back on the path to becoming a vim neckbeard? VS Code so I feel comfortable? Should I use the provided Codepen link to skip the setup and these annoying questions? I opted to go with what I felt most comfortable with: working with VS Code locally in a local repo directory. I'd have liked to have been able to clone the provided repo and reset to a given tag (step-1) or something, but nope! I'm a little worried running it on my local filesystem as a file:/// thing without a web server, but I'll see how it goes. I know sometimes pages need to be running on a proper web server for all functionality to actually work.

After a couple minutes, I needed to start writing some code and had no idea what file it'd belong in. index.html? But it's JS, so I figured I'd need to add a JS file... but not sure where it goes? So I cloned the repo. But then everything was already written up in there, like... it's done. I could delete stuff, but then what?

So I went to the provided Codepen link. I'm guessing that's what the author of the tutorial really wants readers to do.

OK, Whew, Finally Writing

Now that I started writing, I was a little annoyed the tutorial doesn't tell me why we're naming our first class "ShAccordion" -- what is "S.H."? After scrolling up in the tutorial I re-read that we're building a "Smart Home" project, so I guess it's cause of that. S.H. must stand for Smart Home.

Next up I start defining my ShAccordion class, following along with the instructions. It takes me a second to understand what this terse reactive = [['open', false]] means, but not too bad. I haven't written much JS recently, let alone with classes, but I'm not freaked out/overwhelmed yet. The toggleOpen() method is a little weird cause I've been focused on a more functional than object-oriented syntax in my recent JS efforts, but it seems fine.

CSS Surprises

I totally wasn't expecting a :host or ::sloted (sp??) pseudo-element, but here I am working with it. I'm also seeing a ternary JS expression (a real crowd-pleaser) in the styles I'm about to write.

I'm tempted to copy-paste the whole block but shrug and figure transcribing will be fine. I get a curve-ball right out the gate with rgb(228 228 231) since I'm expecting commas but w/e. Most of it seems fine. I get a little nervous using display: flex but I think it's a little late in flexbox's life for me to act like it's some kind of fancy new thing.

After using ${this.open} in my CSS I got all happy because I understand what's going on and I'm making functionality.

Finally I add an event listener and it seems like it's coming together! I'm ready to save... but there's no "Save" button. Maybe I need to fork first? But I click fork and it asks me to log in. It doesn't give me the option to log in via GitHub, so I open Codepen in another window and log in, then try and fork in the original window. Now it opens some screen about changing my plan (??). I refresh the page and it empties my JS console, so I click fork again and then it works. I paste what I copied out of paranoia, then copy-paste the contents of the HTML from the working Codepen example on the tutorial page. Whew!

Making Another One!

I gotta wonder how close what I'm doing is to actually making a legit Web Component without this Minze framework.

While writing the toggleActive method for this other thing, I'm writing this and trying to remember the details around this in arrow functions. I thought it didn't exist or something? idk, whatever, this is clearly a hole in my understanding I should address at some point later. Clearly it works this way.

As I'm writing, my syntax highlighter in Codepen has gone berzerk, it's just highlighting everything in white for some reason. Such is life! This too shall pass.

I write a little more syntax and then see he uses commas between the RGB values and relax a little bit, then wonder if he's just trolling me by sometimes not using them. I saw a guy do this once at a W3 meeting and it was pretty funny, I think he was clearly doing things that people would bark at for being syntactically wrong, then he'd demonstrate it validated. I can't remember what it was specifically, but I think it may have been omitting closing list item tags or something like that, where it's a syntactically legal but not-very-well known. Anyway, moving along.

And Another One

Now I'm writing the third component and am a little puzzled at this double-question mark syntax. I'd like an explanation but too bad. I could look it up on MDN if I really wanted, but at this point I've been doing this tutorial and writing about it for about an hour and a half so I just want to finish up before going out for the evening.

Something in my transcription of the CSS isn't working, cause it's not rendering properly... I think it's got to do with flexbox, not sure though how this is breaking. After a bunch of copying and pasting and seeing what changed between the author's example code and what I've written, I realize I've specified flow-direction (?) instead of flex-direction.

The End

At the end, the author concludes that building web components isn't exactly rocket science. After this brief exposure, I'd tend to agree, although I still wonder what I'm getting from the Minze library exactly.

Good tutorial all-in-all, B+. I'd have given higher marks if there were clearer steps for how to get started exactly without assuming the reader is going to use Codepen, and I'd have liked some more explanation around what Minze's providing, and a little more explanation around the relative = [['open', false]] and ?? syntax.

My takeaways about Web Component from this experience:

My takeaway about my own abilities as a front-end web developer:

My takeaways about writing tutorials: