InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Web components and Polymer

  • HTML import
  • polymer installation
  • HTML5 shadow dom
  • custom tag
 
  • Home
  • > Tutorials
  • > Web Development
  • > Web components

HTML5 shadow dom example

on Feb 1, 2016

HTML5 shadow dom is part of Web components. It is currently in draft stage and supported by Chrome. It can also be compared with react virtual dom. Here is a basic shadow dom example using HTML5 template.

<div id="name">Bob</div>
<template id="nameTemplate">
  <div>
    Hi! My name is
    <span style="color:red;"><content></content></span>
  </div>
</template>
<script>
var shadow = document.querySelector('#name').createShadowRoot();
var template = document.querySelector('#nameTemplate');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);
</script>
refresh done
try it online

Few points to note

  1. Here is the inspect element outcome in Chrome. Note that we are seeing an extra entry for #shadow-root.
    html5-shadow-dom-inspect-element
  2. .createShadowRoot() is used to create shadow root. The moment it is created, it shadows its host element.
  3. We used HTML5 template to populate shadow root. But we could have also used any valid DOM object. But typically one would use template for this purpose.
  4. The <content></content> in template is replaced by host element content.

Specification and Browser compatibility

SpecificationStatusCategories
Shadow DOMW3C Working DraftDOM
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 35+ NoNoNoNoYes 22+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ NoNoNoYes 33+
source: caniuse.com

Suggested posts:

  1. HTML5 template tag hello world tutorial
  2. CSS text-shadow
  3. CSS box-shadow
  4. HTML5 – input placeholder
  5. HTML5 – video tag
  6. HTML5 drag and drop – move an element to dropzone
  7. HTML5 audio tag
  8. Chrome extension tutorial – access active page dom
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML5, Javascript, Tutorials, Web components

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress