Transcript from the "Using Web Components Recap" Lesson
[00:00:00]
>> So Web Components, right? It's easy as HTML. Great reusability, right? We can just copy some tags and paste them into another site. We can get better experiences, right? Well, I can't build a 3D experience but I can with Web Components, I don't want to build that slider thing, but I can with Web Components.
[00:00:28] Progressively enhanced, I think we showed a couple of times where if the JavaScript for whatever reason fails, and I'm not a JavaScript. People turn off JavaScript although like 1% of people turn off JavaScript. I have one friend that turns off JavaScript, his name is James. So, [LAUGH] James turns off JavaScript, but most people don't turn off JavaScript.
[00:00:53] JavaScript does a great job turning itself off. So if one problem happens, boom, it just says, I'm just not gonna work. So and that's okay. So progressive enhancement. It's not always a requirement for me but it can save your bacon. It can let a form submit if you do it right.
[00:01:15] No build tools were harmed in the, [LAUGH] production of this section of the talk. We didn't open the CLI, we just copy pasted HTML from third party sources. So you can of course, get into build tools, bring things locally, but we kinda did none of that. And it's encapsulated.
[00:01:40] The styles in my 3D world didn't bleed out to the rest of the page. I don't think they did. But the styles I'm writing or the sort of like the button styles and stuff like that for the two up, they didn't bleed out into the rest of the page, it's all encapsulated together.
[00:01:58] So that way you have a little bit security to know if you change something, the barstool and the other bars ain't gonna fall over. Okay, on that note, we'll do some Q&A, or take just like a two minute break, let's go here.
>> So you had mentioned about that CSS not bleeding out but you also mentioned overriding styles within these Web Components.
[00:02:22] So can you speak to how that works out if you did wanna write something that in a Web Component?
>> Yeah, so there are a few ways and we'll talk about it and then like next big section like right after lunch, but the kind of core ways to provide styling are, you control the light DOM.
[00:02:46] So anything that you send in there, I don't know, I could have done like hue rotation, CSS on those images I passed into the two-up cuz I control that stuff. I wrote that light down. There's also this thing called inheritable styles, I can talk about that later, but it's some styles do sort of filter through but some don't.
[00:03:11] And so some Web Components like two-up offer these like CSS variables, cuz that's one of the things that do go through. And so variables are kinda one way component authors offer styling in customization. Does that help?
>> Yeah, like anecdotally or in your experience on the topic of build tools do you see and encounter people, I'm guessing transpiring down to you, so it doesn't happen much because the browser age that is needed for Components themselves.
[00:03:45] But in minification typically just like, hey, I use headers to Jessup. What do you see people using for kind of at scale apps or sites that use Web Components?
>> Yeah. So there's a little bit of data out there, that minification is great, but Brotli compression is maybe just fine.
[00:04:13] And then there can be the side effect of minification where you uglify script A and script B and they're both trying to call function C, and boom, [LAUGH] a problem occurs. Is that what the browser says? [LAUGH] It messes up. And so I think at scale people are doing the bundling and minifying, but in Web Component land and this takes a bit of reprogramming, that's all a production level concern.
[00:04:51] So it's not the development environment, that's a production problem. Like the bundling minification asset, sort of splitting, tree shaking, all of that. That's a production thing. And in what's nice, good and bad about that, it's bring your own, so we don't like that, [LAUGH]. As developers, for me personally, I might have to code that, [LAUGH] that's not what I wanted.
[00:05:19] But what is also good about it is you aren't locked into like webpack 4. The project I work on, we are locked into a webpack until a big sea change of other cascading changes happens to enable like switching to ESBL or something like that.