Shadow DOM

• HTML Imports
• Custom Elements
• Templating

Document Object Model

Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots in the main DOM

HTML5 Video Player

HTML Imports

• Custom Elements
• Templating

• Shadow DOM

<link rel="import" href="import-file.html">

Custom Elements

• Shadow DOM
• HTML Imports

• Templating

<cdd></cdd>

How?

http://customelements.io/

• Shadow DOM
• HTML Imports
• Custom Elements

Templating

<template id="profileTemplate">
  <div class="profile">
    <img src="" class="profile__img">
    <div class="profile__name"></div>
    <div class="profile__social"></div>
  </div>
</template>

Not rendered/downloaded until activated

For reusable chunks of html

Examples

<qr-code data="My data stored as a QR code."></qr-code>

<time is="relative-time" datetime="2014-04-01T16:30:00-08:00">
  April 1, 2014
</time>

• just now
• 30 seconds ago
• a minute ago
• 30 minutes ago
• an hour ago
• 20 hours ago
• a day ago
• 20 days ago
• on Apr 1, 2014

<github-card user="pazguille"></github-card>