Applying a Shadow DOM

[00:00:00]
>> So for Shadow DOM then we go to menu page JS and we create the shadow DOM. Typically you create the shadow DOM in the constructor, okay? So one way is to create a property in your own object, in your own class, that says this attach shadow and it receives an object, where we set mode open or close.

[00:00:27]
Remember, this is a way to define, if you want the outside to access your inner DOM or not, okay? And then after I've done this, it's important to change. Where are we appending the content? Now, it shouldn't be this, it shouldn't be this route, that's all. In fact now, you can go back and put this if you want in the constructor.

[00:00:55]
You don't need to, it's up to you where you wanna do this. Because now you are not adding children to yourself, but to the shadow DOM. That is like a different document, a different thing, Okay? Now, you can see that the best coffee in town is still black, the default color.

[00:01:15]
And violet, it doesn't look nice I know. Violet is only applied to H2, to my web component. And let me show you how it looks like here in the Elements tab. Now, when you open main and menu page, look at that. There is like a special, like situation here that says we have a shadow root here that is open.

[00:01:41]
And if I open that one, we can see its own little DOM. It's an isolated document within my whole document, that's a web component with Shadow DOM, okay? Where the styles are only applied to that element. That's a web component with Shadow DOM. I'm going to delete the style that violet, you were expecting that, right?

[00:02:11]
You don't like the violet? Yeah, we have a question.
>> Why don't you put the template in the JS file, and then just use some kind of render function?
>> So the template is HTML, so I'm not sure what you were thinking about how to put this in JavaScript, maybe in a string, you were saying.

[00:02:32]
So maybe something like this. Can we, yes, if you're doing this, you don't need the template, you can just put this and then use inner HTML, it's another way. And then you don't use the template elements at all, it's another way. But yeah, this is not HTML, so you don't have validation from the IDE because it's a string.

[00:02:57]
But if you wanna do that, go ahead, so you can do that. Yeah, sure, or you can load it from from an external file using the Fetch API. Remember, we are not in JSX, so I cannot write HTML like directly in JavaScript, okay? Can we use JSX with this?

[00:03:21]
Yeah, you can use JSX without React. But yeah, in that case, you will need a build process anyway and set up the JSX factory to work with the DOM, but you can. So you can mix, so you can make your own decisions here, that's the good part, also the bad parts.