Transcript from the "Web Components Overview" Lesson
>> 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: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: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: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: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: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,
>> 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: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.