Hi, I'm Ankit and I have close to four years of experience in web development. Today we are going to talk about unlocking the power of Shadow Dom. So let's get started. So here's what we are using to cover. We'll start with what is Shadow Dom? What are the different types of Shadow Dom? Real world examples of Shadow Dom in action. How you can implement Shadow Dom in popular web developers frameworks like React and angular. Then we are going to end with a hands on demo to put it all together. So what is Shadowdom? In simple terms, it is a fundamental web technology that helps you encapsulate your web components and styles, making them immune to global scope. Think of it as a protective shell around your components, ensuring that your code won't interfere with or be interfered by other parts of your web application. Shadow Dom comes in two flavors, open and closed. The distinction between them is how much they expose the outside world. Open Shadow Dom allows you to style your components from the outside. To create an open shadow dom you can use this code, whereas the closed shadow Dom keeps everything hidden away from the global style. To create a closed shadow dom you can use this code. Shadow Dom has been embraced by some of the most popular web applications including YouTube, Google Maps and even material UI. YouTube utilizes shadow Dom for its video player, ensuring that your custom styles don't break the player's layout. Google Maps uses Shadow Dom to encapsulate the maps component, providing a seamless integration experience. You can also use shadow Dom in all popular frameworks like React, angular or just simple web components. Here you can see to use Shadow Dom in react, we use the attached shadow function on the reference of a JSX element. Shadow Dom is at the core of angular's component encapsulation. You can see that we can add can encapsulation property in the component directive of any angular component. You can also create shadow DOm and simple web components using the attached shadow function. Now comes the fun part. Let's look at shadow Dom in action. Here you can see we have created a simple web page. Here we have a tag that says custom button in the script. We have reference to this custom button element using the query selector. Then we are creating a shadow dom using the attach shadow function. Note that the mode is closed. That means other components cannot access this shadow Dom. We are also creating a style for our button. Then we are attaching the styles to the shadow Dom. Then we are creating a button using the create element and we are naming the button unlocking. Then we are attaching the button to the shadow dot here you can see the output. Now since this is closed, if I just add in a style on the button and say background color equals to green and save it, you can see that no changes occur. Now if I just change this mode to open then also this doesn't work. This is normal in shadow Dom because how shadow Dom works is it creates encapsulation, right? So to access the open shadow Dom what we can do is we have to create a script tag and then we'll just type in document getelement by Id. Then we have our custom button shadowboot queryselector. Then we will select the button style. Then here we can change the background, choose the background color and set it to green. Now you can see the color of the button has changed. Now if I just change this mode open to close and save it, you can see that the color is reverted back to blue. If I check console, you can see that cannot read properties of null. That means the shadow Dom is not accessible. Now if we just go to elements and expand this custom button, you'll see a shadow root and in bracket you can see closed. This means the shadow Dom is there, but it's not accessible by the other components. You can see all the styles as well as the button here, but it is not accessible. So if we change this to open and save, you can see that the color of the button changed and the shadow root is now again changed to open. You can still see the styles and modify it using the JavaScript functions. So this is how you can use shadow Dom in your web applications. You can scan this QR code to connect to me on LinkedIn and also access the port. Thank you for joining in.