Web Components Overview

[00:00:00]
>> What are Web Components? Let's dive in, this is the boring definition, Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. That's from the old webcomponents.org site. The keyword here is gonna be encapsulated, but these custom, reusable, this all sounds pretty familiar, right?

[00:00:29]
If you've been following web design in the last 10 years or so. LEGOs, right, components, designed systems. And this is how we build websites more or less objects oriented. [LAUGH] So you have components and we staple these components together to build up our websites. Right now, we're probably all using some existing JavaScript framework, React or View or Spelt or Angular to kind of build our LEGO sets, right?

[00:01:06]
We're already doing this component work, so you might be wondering, these aren't new? Dojo had components in 2005, then jQuery YUI, and jQuery in 2006YUI, 2006 Ext JS, which became Sencha 2007, Angular 2010, Bootstrap, Ember. And notably, Web Components were first proposed in 2011. So they're kinda old, but then React in 2013, View in 2014, Spelt in 2016.

[00:01:41]
Web Components aren't new. So what makes Web Components different than all the other sort of ways to build components systems? Well, the big thing is Web Components are a set of web standards, which there's some nuance there, but it's not just reams and reams of JavaScript that gets sent to the client.

[00:02:08]
These are built into the browser these features. There's four sort of critical features here. Template, which also comes with a buddy called slot, we'll talk about that, but template is basically what it sounds like. Basically, you can put HTML in there and the browser parses it and says, okay, I know what elements these are, but it doesn't render it to the page, sort of a ghost element, a strip tag, or something like that.

[00:02:37]
Custom elements, these are sort of the Hallmark feature of Web Components the ability to basically create your own HTML-like interface. So the only difference is it has a dash in the name. You have to have a dash otherwise it's not a Web Component. We reserve undashness for native components.

[00:02:59]
So custom elements are kind of a Hallmark feature. ShadowDOM is just a terrible [LAUGH] word. But encapsulation is probably the best way to think of that. And the way I think of it is almost like an egg, the egg wants to keep the egg stuff inside and doesn't want it to go out and doesn't want anything to get in.

[00:03:23]
And the same with Shadow DOM there's a boundary around there and inside the egg is the Shadow DOM. I know analogies aren't super great but that's the one I'm going with. ES Modules, nay HTML imports. HTML imports were killed by Mozilla on December 15, 2014. I'm not mad about it, yes, I am.

[00:03:47]
God forbid we could import HTML using HTML but whatever we're left with ACMA script modules, which is the sort of native way to import and export, JavaScript functions, classes, all kinds of things, variables, I guess you could, import and export anything with ES Modules. And so a lot of Web Component libraries have now moved over to this standard, just because it exists and it works and it's really great.

[00:04:17]
Digging in, template element looks like this. Pretty basic, you just put HTML in there and it doesn't render the page. The template's buddy slot is kinda interesting. Slot is used to reveal content inside a template. And this only comes into play when you have a Shadow DOM. But basically, if you think of that custom element, you have the custom element, and then you write stuff on the inside, that stuff on the inside gets thrown into this slot element, that content is revealed there.

[00:04:53]
And you're not limited to a single slot, you can have multiple slots and give them names and then you can pass things by name into each slot. So pretty efficient. I usually typically use the single slot method and yeah if you've used view slots, anyone use views lots?

[00:05:15]
Same principle here if you've used view slots. One also interesting thing, a superpower is that slot has a slot changed event. So if the content changes, somebody uses JavaScript in a weird way, and changes the slot, you get a slight change event that you can react to inside your weapon book.

[00:05:37]
Custom elements, we talked about this. Only two rules, needs to have a hyphen, right, and then you have to register it using custom elements, custom elements plural, sorry about that. define. And then custom alert, so this would be a custom alert. Here I can try to attempt to highlight but a custom word and then we pass some attributes to it, and that's gonna change the way it looks, the way it feels.

[00:06:07]
And then when we kind of register it, we kind of put those attributes there. We're gonna observe those attributes, see if they change. And then we're gonna have a constructor function in our class. And then we're gonna do more stuff. And then we define it here with our class so that custom element with the hyphen refers to this JavaScript class.

[00:06:27]
So when it gets called, it sort of executes that JavaScript function. Hopefully, that makes sense. Shadow DOM, okay, it's an opaque term to me. But yeah, encapsulation, nothing leaks in and leaks out. And I will say, this is maybe the biggest superpower and also the biggest frustration because you've never used this in a component context before unless you've worked with Web Components.

[00:06:55]
It's sort of a part of the Web Component spec. So we're gonna learn about but it can be frustrating when stuff isn't happening the way you expect it or you think, I have access to Window or the Document, and suddenly you don't. And so what happens here in the Shadow DOM, we have that custom alert with the content, right?

[00:07:21]
And we have Shadow DOM and Shadow DOM implies the existence of Light DOM, right? So the Light DOM is the stuff you write and the Shadow DOM is the stuff that component writes. And so it's gonna put up an image with a warning icon and they'll have a slot to reveal that content, right?

[00:07:40]
And then the button to close and I'll kinda get into that later but you could kinda imagine a situation where you're handing a design system off to coworkers and you don't want them to be in charge of coding the button. You don't want them to be in charge of coding the icon system, you wanna give them a very strict set of icons they can use so they can't just ruin the website.

[00:08:05]
So Shadow Dom is a really great way to apply some fences, you can do this stuff and then we'll take care of the rest, you didn't have to do some add event listener. Yes is there a question?
>> Yes and if this is skipping ahead just let me know but so by default the custom element just lives in the Light DOM and you do need to run this .attachshadow to instance or create a Shadow DOM inside of the,

[00:08:31]
>> Yes.
>> [INAUDIBLE]
>> Correct.
>> [INAUDIBLE]
>> Good question, yeah, so Shadow DOM isn't for free exactly. You have to attach a Shadow to the custom element. And Shadows, it's weird, they can be open or closed, obviously. [LAUGH] So closed means it's locked down but open means you can access the Shadow DOM from the outside.

[00:08:59]
So from a parent component or something, I could talk to the child Shadow root. But I could talk to the Shadow DOM from a parent component. But when it's closed, you don't have access to that. And I can show that off if you remember to remind me. But yeah, so you can close off a Shadow root if you need to.

[00:09:28]
You might think of insecurity, specific situations or I don't know, Google Maps or something [LAUGH] they don't want you futzing around with their Google code. So they'll just lock it down. Or reaching too far into stuff they do. And then delegates focus defaults false, but this is an accessibility feature.

[00:09:53]
It's a little bit complex but it will try to negotiate if your element is supposed to be focused will an input or something your custom element, it'll try to negotiate focus to the first focal element inside the Shadow DOM. So if you think of it, you have an input in the Shadow DOM, if this is an input and you click on custom alert, without that the browser is like, okay, you click the alert but you wanna pass that focus down into the Shadow DOM.

[00:10:28]
Everyone's set? All right, ES Modules. If you've done a course before you probably run into this. [LAUGH] Import and export in JavaScript. And this is surprisingly relatively new. CSS had imports first, just wanna call that out. But JavaScript finally got it, it's sort of replacing the node-based requires syntax and basically, you can just pull out variables, you can pull out just the default class, but you have to set it up in the code to have an export.

[00:11:11]
So you can only import things that have exports and export things that have imports. There's also some interesting superpowers with ES Modules. To use a module in a browser just from HTML, you type script, type equals module source whatever path to script. And what's interesting about that, I learned somewhat recently is that actually puts your script on a fast path on a modern JavaScript engine inside the browser so you can get faster JavaScript just by moving to modules.

[00:11:53]
I didn't know that. There's no manual that tells you that but [LAUGH] I'm telling you now. There's actually a legacy parser to support Legacy Scripts and how they sort of handled everything. So if you use the type equals module you get sent to this fast path evaluator. So might be a cool speed boost to your website just to switch to those.

[00:12:17]
It might not be super easy. [LAUGH] Things fall over but the neat thing about this is imports and exports. And so what's neat is I can import a button, specifically with Web Components I can import a button. And then I can call that button whatever I want. I can just rename it if I want and then I can change attributes if I want, change the default stuff.

[00:12:45]
So it's super is just a word that says behave like the parent thing. So behave like whatever's in this extends, so now our hero button will behave like the norm button but I'm gonna set the size to large. And so this is a neat thing if you ever steal elements from somewhere, no, we don't steal, no one would steal an element but if you steal elements.

[00:13:09]
[LAUGH] If you borrow elements from someplace on the Internet but you wanna make it look like you coded it or if your organization wants the same prefix in your custom element you can totally do that and it's great.