{"id":34246,"date":"2016-05-10T17:01:39","date_gmt":"2016-05-10T11:31:39","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=34246"},"modified":"2016-05-10T17:02:00","modified_gmt":"2016-05-10T11:32:00","slug":"introduction-to-shadow-dom","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/introduction-to-shadow-dom\/","title":{"rendered":"Introduction to Shadow DOM"},"content":{"rendered":"

Web Components\u00a0<\/strong>consists of several independent technologies, Shadow Dom<\/strong> is one of them. Web components are reusable user interface widgets that are created using open Web technology. They are fully browser supported or we can say they are part of the browser, so they don’t need external libraries like jQuery or Polymer.<\/p>\n

Web Components is a combination of four technologies :-<\/p>\n

    \n
  1. \u00a0Custom Elements.<\/li>\n
  2. \u00a0HTML Templates.<\/li>\n
  3. \u00a0Shadow Dom.<\/li>\n
  4. \u00a0HTML imports.<\/li>\n<\/ol>\n

    In this blog we’ll be focusing on shadow DOM.\u00a0Currently only Chrome and Opera Browsers<\/strong> supports it. It\u00a0provides encapsulation for styles, JavaScript and templating so that these things remains separate from rest of the DOM.<\/p>\n

    Now one question arises that why would one wants to keep some code separate from rest of the page? One reason is that on a large site, for\u00a0example, \u00a0if the css<\/strong> is not carefully organised, then the styling for the navigation can “leak” into the main content, where it was not intended to go, or vice-versa.<\/p>\n

    Now let’s take an example to understand this problem, you all are familiar with the audio tag.\u00a0<\/strong>Have you ever seen that your style overriding the style of audio tag. No, this is because audio tag renders its view and styling from shadow dom.<\/p>\n

    \"Screenshot<\/p>\n

    To enable shadow dom in chrome browser open Developer tools by Ctrl+Shift+I. Click on 3 vertical\u00a0dots on the top right corner of dev tools before close button. Now click on settings there you will find “Show user agent shadow DOM”<\/strong> checkbox under the Elements section in General Tab. By checking that button it will enable shadow dom on one’s browser.<\/p>\n

    \"Screenshot<\/p>\n

    Shadow dom can be appended to any kind of HTML node (e.g., div, button, section etc). With shadow dom, element get a new kind of node associated with them,\u00a0this new node is known as\u00a0Shadow Root.<\/strong> An element that has a shadow\u00a0root associated with it is called a shadow host<\/strong>.<\/p>\n

    Note : –\u00a0<\/strong>The content of a shadow host<\/strong> isn\u2019t rendered; the content of the shadow root<\/strong> is rendered instead.<\/p>\n

    For example, if you had markup like this:<\/p>\n

    [code language=”html”]
    \n<button id="btn">Hello, world!<\/button>
    \n<script>
    \nvar host = document.querySelector(‘#btn’);
    \nvar root = host.createShadowRoot();
    \nroot.textContent = ‘Hello, friends’;
    \n<\/script>
    \n[\/code]<\/p>\n

    For output of above code click here<\/a><\/p>\n

    Here as we can see that instead of\u00a0“hello, world”<\/strong>, “hello, friends”<\/strong> gets rendered on button. Not only that, if JavaScript on the page asks what the button’s textContent is, it isn\u2019t going to get \u201cHello, friends\u201d, but \u201cHello, world!\u201d because the DOM subtree under the shadow root is encapsulated.<\/p>\n

    Content Tag<\/h2>\n

    If you want to render the content of shadow host then content tag is used to accomplish this task.\u00a0Demo<\/a><\/p>\n

    [code language=”html”]
    \n<button class="red">My Button<\/button>
    \n<script>
    \nvar button = document.querySelector(‘button’);
    \nvar root = button.createShadowRoot();
    \nroot.innerHTML = ‘<content><\/content>’;
    \n<\/script>
    \n[\/code]<\/p>\n

    Content tag is similar to transclude property in Angularjs. If you want to choose which part of shadow host will be rendered by shadow root then select attribute in content tag is used. The value of select attribute can be element’s id, class name or node name<\/strong>.\u00a0Demo<\/a><\/p>\n

    Styling the host element<\/h2>\n

    The :host css property<\/code> allows you to select and style the element hosting a shadow tree: Demo<\/a><\/p>\n

    [code language=”html”]
    \n<button class="red">My Button<\/button>
    \n<script>
    \nvar button = document.querySelector(‘button’);
    \nvar root = button.createShadowRoot();
    \nroot.innerHTML = ‘<style>’ +
    \n ‘:host { text-transform: uppercase; }’ +
    \n ‘<\/style>’ +
    \n ‘<content><\/content>’;
    \n<\/script>
    \n[\/code]<\/p>\n

    Those are the basics of shadow dom. Shadow DOM gives us scoped style encapsulation and a means to let in as much (or as little) of the outside world as we choose. I hope you\u2019ll agree that shadow dom is extremely powerful. For the first time we\u2019ve proper encapsulation without extra baggage of <iframe>s.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Web Components\u00a0consists of several independent technologies, Shadow Dom is one of them. Web components are reusable user interface widgets that are created using open Web technology. They are fully browser supported or we can say they are part of the browser, so they don’t need external libraries like jQuery or Polymer. Web Components is a […]<\/p>\n","protected":false},"author":911,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":25},"categories":[1],"tags":[3041,55,3285,3286,3258],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/34246"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/911"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=34246"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/34246\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=34246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=34246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=34246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}