In our first episode of 2021, we decided to do a bit of a different episode. In this episode, we talk about web components. Claire has some answers (be sure to check the notes!) and Steph has some questions. Do you have questions? Let us know.
Check out the Episode 006 Notes
and I'm Steph.
And this is Word Wrap.
On today's episode, we're going to talk about web components. Um, I am inspired by this because, uh, there were some hot and spicy Twitter topics lately, uh, talking about certain things that may not be compatible with web components and some that are, and anyway, we don't have to get to that.
So Claire, um, how did you, what first attracted you to web components and how did you kind of get started with them?
So I wanted to componentize, um, certain things, uh, certain parts of user interactivity, like a modal or like an auto-complete or stuff like that. And so I came across the project, uh, light element. It might be light element. It might be lit element. I still haven't figured out the pronunciation of it, but it is a project from the Polymer project, which is from Google.
And, something that I read. And again, I will correct myself later on in the, in the notes, but, um, I believe that the web component spec can be used on its own and I've used it on its own, but it is also, uh, thought of as like, you know, it's supposed to be a starting point for a, you know, a small library to like jump off of and, and, um, and extend. So by a roundabout way of saying it's supposed to be extendable.
Anyway. So LitElement is really nice and small, and it takes things that I love from Angular, such as, uh, using decorators and TypeScript. Just like, you know, it's like @property and then you give it like a name and then that's like, like essentially a prop from React.
It would, it maps to an attribute on an HTML element. So you can be like, my-element ID, not you wouldn't actually use ID cause ID is an actual HTML attribute, but, um, I dunno, let's say I wanted to name an attribute Stephanie, it would be @property stephanie, and then I could use that in the component.
So, um, that's really how I got started. It was more of a necessity kind of thing since I couldn't really reinvent the wheel right. When I came to my current job and yeah, it, uh, it kind of just blossomed from there.
Cool. So it sounds like you're mostly using it within a framework, but one of my kind of beginner questions when I was trying to just learn more about them and work through creating my own, which I'm sure didn't quite hit all the marks on best practices. But I was finding it hard to piece together, like even from tutorials, like what's all involved with making a web component. And how, how do you make a system of them? How do you make more than one and add it to your project?
Right on. So I remember when web components started to be a thing that was on my radar, I should say a couple of years ago, one of the criticisms and why I didn't look into it too deeply - because I believe the criticisms from people I trusted - was that it was difficult to make them accessible. Do you have any, like tips? Is that still a concern or what do you, what do you have for us on that?
Yeah, so that is a concern of mine. And I actually, that is one of the reasons why I was pushed towards a library instead of using the native spec, because uh LitElement in particular can do something where it essentially renders the component outside the shadow DOM, which I think most of the, the concerns with accessibility come with the shadow DOM, because the way of interacting with it is kind of like you have to like dig into the shadow DOM, and I'm not sure necessarily. And I'm going to do more research after this, this episode, just to make sure, but I'm pretty sure that it's a little harder for screen readers and accessibility software to essentially reach into that shadow DOM.
Gotcha. So obviously my kind of thing is CSS. And so, um, I know that one kind of crazy thing about them considering its shadow DOM, is that one of the things that can pierce shadow DOM is uh CSS custom variables. Is that how you typically style things or what, what do you use to style your components?
I do. I can imagine that, you know, like putting, um, variables on the root element or root, uh, in, in CSS variables would be very good because I believe they reached through the shadow DOM, but, uh, CSS in general, doesn't reach through this shadow DOM. So that can be a little weird. And then it's kind of a mental leap would be like, Why is my CSS not showing up in this thing?
Yeah. I don't usually like, you know, hawk, like using a library to utilize some native technology, but I really do think the web component spec is supposed to be used with a library of some sort. And there are plenty of them out there. It just makes it a lot easier to interact with them. And the really nice thing is that a lot of them stay very similar to the spec. So you can rip out the library, if let's say the spec gets better or at least easier to work with.
So my single, baby web component that I have is, um... so there was a challenge on CSS Tricks [edit: CodePen] in November I think? Maybe a little bit earlier. They were kind of going through a theme of nostalgia on the web. And so one of the challenges was bringing back webrings. So my one little baby, my one little web component is a webring because that was kind of a pretty - it seemed like a good use case. Because the idea being that people can add themselves to a JSON file and in GitHub. So it can like be interactive and always updating, but it'll kind of update independently from the rest of my code base.
So if you go to 11ty.rocks, then at the bottom, that webring is a web component. So theoretically, also somebody else can use that on their site. So I definitely, really, I mean, to me, the portability seems like a super strong selling point. Um, but do you still have that if you use, if you use a library, like can somebody independently... like if you're sharing it, like among an enterprise, say, can like different parts of enterprise pick up, you know, one off components? Say you figured out auto-complete can they pick that up?
Yeah, you can definitely package them in a way to where you know, that the. I mean, yes, you're right. It becomes a dependency. There are certain libraries out there that do not do that. Like I believe Stencil, um, actually compiles to an actual web component that doesn't have any dependencies.
I think if you're going to be doing something like you said, with a webring, um, I don't think I would use light element or LitElement or - see again, I, I get messed up with that. I, I, you know, I would probably think twice to actually use a library outside of just the native spec.
Um, because I think that's where the, you know, being thoughtful with your actions comes in. Yeah. If you're using it in one code base and, and the dependency is always going to be there, it's a little bit less a bar, um, to make that work. So, uh, yeah,
So at my previous position, um, the company was very heavily weighted towards Angular, um, and had 30 plus different product development teams.
So one proposal, or I heard, cause I also have not written Angular. You have. Um, is that Angular now actually, I don't know if exports is the right word - compiles to? - web components. And what, and so along with that, an argument was that a web component could be used, like if we created web components - because my job was also sign system related - you know, if we created web components, then it could be used by whatever else. Your isn't your stack. Like more easily shared.
Yeah. So Angular actually, uh, allows for custom elements. Uh, just by default. You have to add them in a certain way, but essentially they get imported like any other, uh, you know, any other Angular element Angular component. Now, Angular can export web component. Like they're not necessarily web components. They're like, individualized Angular elements. They essentially come still with the Angular runtime, albeit smaller and, you know, they require Angular to run. However, I think the minimum size for them is like 200 kilobytes, which if you use like LitElement, it's like 60 kilobytes.
So like you're, you're not like totally breaking the bank, but, um, especially in an enterprise environment, like that does make sense.
Now, I'm going to have to research this afterward, but I believe React is still a little weird with web components. Um, and they have purposefully not wanted to make the, the, you know, make interoperability better between React and web components. I think it's kind of a competitiveness thing where React was kind of marketed on what web components are supposed to do. And then I see every React project I've ever seen just it turns into it... I'm not going to get into that. Um, but, uh, point is, um, yes, that is the like thought process behind it. Uh, but again, your mileage may vary and it should be very much weighted upon like who the audience is. Um, in an enterprise environment like that I think it makes sense, but you know, it's all about execution and how it works. So, cause it could also go very badly.
Nice. That's all helpful info. I was also thinking that we need to do a future episode. So, you know, usually when we see like somebody have a hot take, a bad take, like it's just a dogpile. We should do a fun episode, um, where we have friendly healthy banter because you enjoy, or at least have written, I think you enjoy it? Angular. And I have written and enjoyed React. So we should definitely do a friendly debate.
I’m looking forward to it!
Well, awesome. Well, you definitely answered some of my questions and hopefully like gave some other folks that are listening out there the - some ideas to look into it more and kind of explore the possibilities. So, yeah, that was awesome! Thank you.
Good! For more information, you can go to webcomponents.org and they have all of the different libraries, um, that do extend web components as well as how to use web components. And there's also a library of web components that everyone else has made. Um, so go there and, uh, have a ball.
Thanks for joining us on another episode of Word Wrap. Be sure to subscribe on your favorite platform, or pick up the RSS feed on wordwrap.dev. You can also catch us as @wordwrapshow on Twitter. Until next time!
Review the Episode 006 NotesView All Episodes