Vinay MittalFollowFrontend Weekly--1ListenShareAn important aspect of web components is encapsulation — with Shadow Dom we can make markup structure, style, and its behaviour hidden and separate from other code on the page so that different parts do not clash. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.In this article we will discuss about:-Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.Here are some terminology of shadow DOM :To create shadow DOM for an element, call element.attachShadow() , which takes object as parameter with mode as key and value can be open or closed and closed by default.The mode closed means if we want to access the shadow Dom with javascript it will return null and can’t access that, and open means we can access the shadow Dom and it’s child nodes with Javascript like:-Before jump in to the example let’s understand template and window.customElements first.Template:-The HTML element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.This won’t appear in your page until you grab a reference to it with JavaScript and then append it to the DOM, using something like the following:-So, we have to get the template content first using .content and append back to the DOM to make it visible.customElements:-The customElements exists in window object and is used for defining a custom element and teaching the browser about a new tag. In the customElements, methods are exists of typeCustomElementRegistry The CustomElementRegistry.define() method can be used to create the new custom element. We are using .define() method to create custom element in below example.The .define() takes below arguments:-- first: A string representing the name you are giving to the element (kebab-case).- second: A class object that defines the behaviour of the element.- third: is optional and an object with key as extends and value which specifies the built-in element your element inherits from.customElements.define("word-count", WordCount, { extends: "p" });Let’s create index.html file which contains template tag with content:-define a customElement and attach template content in shadow root like:-Here we are creating a custom element i.e. my-custom-element with customElements.define method that we have discussed above.on line no 6. we are accessing the template tag with unique id and then content of template tag with template.content . on line no 9. creating the shadow root with attachShadow and append template content to it.The key point to note here is that we appended a clone of the template content to the shadow root, that’s been created using the Node.cloneNode() method. cloneNode() returns a duplicate of the node on which this method was called. cloneNode contains optional boolean parameter if true then whole subtree including child and text will be cloned , in case of false only node will be cloned not all subtree.You have to add my-custom-element in body tag to render it’s content.If you go to developer console then there is shadow root attached with my-custom-element .In the above example the content of template tag is static means it will render same content for every
Subscribe to Vedvyas Articles
Get updates delivered right to your inbox!