Shadow Dom in HTML Introduction tutorial

hi and welcome to top taxi tutorials today we are going to learn about shadow Dom before we go into detail let's look at the issue with CSS today and why we need shadow Dom let's say I have a page with some you know some div here and it has a class X and some text then in a CSS I'm coloring the font to be read using this the class so when I render it it renders the code to be read now let's say if I'm using a third-party tool somewhere and I'm including it and they don't know about my code and I don't know about their code and let's say they also have a class X but in their library the color of the the font color defined in the class X is let's say green so when I want to render it both my code and their code would become green and this is a fundamental problem because CSS rules are applied globally which means it will find class X everywhere in the the dome and it will claret green and which could become a problem now you know that you can you can add another class you can there other method to solve this issue but we should not be solving it this way we should be able to have some local scoping there should be in it there should be a solution which creates boundary between my code and what other people wrote and where that's where the shadow Dom comes into picture shadow dome is a separate dome tree of elements that you can create which is not the part of the main document dome but when you render it behaves like it's a part of your main document don't so that is very cool so so creating of shadow DOM is very easy the feature was added to most of the browser about couple of years ago well first thing we're gonna do we're gonna create an element where we will insert our shadow Dom so here's an element with ID shadow host so this is what what we're gonna call a shadow host this hosts the the shadow shadow Dom so first I'm gonna do we're gonna access this this element using a document cry selector and next thing we're gonna do we're gonna use this element host to create our shadow root under which the shadow dome would lie so you can create this shadow root this will create our shadow route now that we create the shadow we're gonna add some elements to it so we're gonna create an element war Dave equal to Dave so this so this would be a dear and we can say Dave dot text content equal to can you see me now and we can append this div to the shadow root using okay child yep so what I rendered I can see the now when I rendered I can see that that element is being rendered however if you notice this hollow is not being rendered now let's see if I add a class here to the development I can say class name equal to X and I can style this X with color red and if I render this it won't render red and now if I to to make sure that it does really should render I can I can create another element outside here with the same class name and I'm gonna put the text here outer element so we can differentiate now if I render this instead of idea should use class since it's a dog so if I render this I can see the outer element is rendering thread but the element inside the shatterdome is not so it's not affecting the the element inside the shatterdome there is a way to actually style what's inside the shatterdome we'll cover that later but first let's look at the the inspect element and see what's going on inside in order to do that first you have to do is go to the right side here if you're using Chrome go to the settings and in the settings go to the general tab and within the general tab you would find the area where element properties defined and here you need to activate show user agent shadow Dom when you do that here in the in the Aged in the HTML area if you go to the the element at the shadow Dom element you can you can see following under the share host you will see something like a pound sign shadow dash root under which you can see the the elements of the shadow Dom if I open this I could see that div and I can see the class X that I just added and can you see me now now here in this example we just edited one element to the shadow root and you have a three lines of JavaScript code if you have a much longer HTML but there should be a better way of inserting this HTML so for that we can look at this example so here in this example instead of creating elements directly and using javascript I'm gonna create a template I'm gonna create a template element inside the the main document dome so if you look at this example I have this template element which has its own style and had its own element inside and what I'm gonna do is when I when I create a shadow root I'm gonna append the the template element inside the shadow root now now remember template elements are special elements in HTML which doesn't render so if you see a template element at that part won't be displayed in the HTML to look at it if I just delete all this code and if I run this I would just simply say hello and not the rest of the template different what's defined inside the template so that's really nice now I can use that template and insert into the shadow so this is a much better way of inserting elements into shadow Dom so in the next tutorial we will cover some advanced topics on a shadow dome such as creating pseudo elements how to separate the CSS files for for particular shadow how to apply CSS across all the shadow domes and some use cases well you can go to the next tutorial by clicking a link down here or at the end of the this tutorial and please if you really learn something from this tutorial like subscribe and provide a nice comment thank you hope you have learned something from this tutorial if you did then please follow me on Facebook and Twitter and subscribe the channel like the video and provide some constructive comment or question if you have you

Channel: techsith

Views: 51,394

Rating: 4.8433251 out of 5

Keywords: shadow dom, shadowdom, html5, shadow root, techsith.com, techsith, techsithtube, Html, java script, javascript, web tutorials, Css tutorials, css lessons, css3 training javaScript tutorials, javaScript lessons, javaScript training java Script tutorials, java Script lessons, java Script training JS tutorials, JS lessons, JS training

Id: SDs4xmMcVS4

Length: 9min 14sec (554 seconds)

Published: Thu Feb 25 2016