Declarative Shadow DOM

[00:00:00]
>> And also we have the Declarative Shadow DOM, that today is the one that has just arrived to Safari, okay, just arrived to Safari. And it's a way to define that you want the Shadow DOM directly in the markup, not with JavaScript. When you create a template, you specify, I want the Shadow DOM for this template.

[00:00:23]
And that means that a server-side rendering engine can declare a Shadow DOM directly in the HTML without executing JavaScript, all right? So in the future, it might be like a good way to create a Shadow DOM on web components, but today it's still meh, okay? What about CSS?

[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:11]
There is an API in JavaScript to create style sheets with JavaScript. You can add a script to a template or a style to a template, a link to an external file, or use an external CSS file loaded with fetch and inject that in the Shadow DOM as a style.

[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 custome element. 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.
>> Yep.
>> When we clone the template, do we clone all the styles inside?
>> You clone everything inside, all the DOM inside. Yeah, the idea is because when you have different instances of that element, you want each instance to have its own Shadow DOM.

[00:02:46]
>> Yep.
>> Are classes required for components or can we do a functional style?
>> So classes are not require. So the object that you send here must follow the HTML interface. So does it mean that it must be a class declaration? No, there are other ways In JavaScript.

[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:03:35]
By the way, it's official, it's not a hack. But it's not, by default, a function in functional components and class components in React. So let's say that it must be an object implementing an interface, and the way to do that in modern JavaScript is a class. But also, we have classic ways to do that, that today looks a little weird, but they are still there.

[00:04:03]
So it's possible to change the style.