Transcript from the "Declarative Shadow DOM" Lesson
[00:00:45] Cuz we haven't mentioned CSS. A web component typically has a CSS attached, mostly if you're using Shadow DOM, because now we know that it's not going to inherit CSS from the outside. Well, again, alternatives, not one single way. You can use CSSOM APIs and see what's that. That's a DOM, but for CSS.
[00:01:29] That's the version that we will use, not because it's the best one, it's just one way. Yeah, question.
>> Where's the link between template and the custom element, so the styles and the template become encapsulated?
>> So the question has to do with where is the link between the template and the custom element?
[00:01:52] Actually, there is no link. We do that link. So we as developers of the custom elements, we're going to load that template by ID, for example. In fact, you can reuse the same template for more than one customer. That's why we need to clone it as well. So that's why a web component is actually a set of completely separate APIs, that it becomes like a design pattern, okay?
[00:02:21] Let's use these three APIs to create web components.
>> When we clone the template, do we clone all the styles inside?
>> You clone everything inside, all the DOM inside. Yeah, they that because when you have different instances of that element, you want each instance to have its own Shadow DOM.
>> Are classes required for components or can we do a functional style?
[00:03:11] Today, they will look like hacky ways to some kind of injecting to an object a different prototype, blah, blah, blah, blah, blah. So to answer quickly the question, you can create your own mini-framework, be it library, that can create web components from a function, okay? But you have to do that, you have to hack this a little bit.
[00:04:03] So it's possible to change the style.