Estelle Weyl

www.standardista.com

@estellevw

@standardista

google-map { display: block; height: 600px;}

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

<template is="auto-binding">
<google-map-directions map="{{map}}"
      startAddress="San Francisco"
      endAddress="Mountain View"
      travelMode="TRANSIT"></google-map-directions>
  <google-map map="{{map}}" latitude="37.779"
              longitude="-122.3892"></google-map>
</template>

• Semantic
• JS for behavior, CSS for presentation, HTML for content
• Silo-ability
• Style encapsulation
• Native (better performance)
• Reducing number of DOM nodes to those needed at runtime.
• modularized and organized code: less prone to errors.
• Reusable interface elements and functionality.
• Easily open sourced: share interface elements/code between projects/developers.
• Two-way binding

a.k.a. Table of Contents

• <template>
• Shadow DOM (and <content>)
• HTML imports
• Custom Elements

Notes / links ➹

<div class="name-tag">
  <div class="outer">
    <div class="logo">JSSummit<span>2015</span></div>
    <div class="tagline">Online JavaScript Conference</div>
    <div class="inner">
      <div class="name">Estelle Weyl</div>
      <div class="role">Speaker</div>
    </div>
    <div class="footer">Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </div>
  </div>
</div>

<div class="name-tag">
  <div class="outer">
    <header>JSSummit<span>2015</span>
      <p>Online JavaScript Conference</p>
    </header>
     <main>
      <p class="name">Estelle Weyl</p>
      <p class="role">Speaker</p>
    </main>
    <footer>Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </footer>
  </div>
</div>

<div class="name-tag">
  <div class="outer">
    <div class="logo">JSSummit<span>2015</span></div>
    <div class="tagline">Online JavaScript Conference</div>
    <div class="inner">
      <div class="name">Estelle Weyl</div>
      <div class="role">Speaker</div>
    </div>
    <div class="footer">Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </div>
  </div>
</div>

<div class="name-tag">
  <div class="outer">
    <div class="logo">JSSummit<span>2015</span></div>
    <div class="tagline">Online JavaScript Conference</div>
    <div class="inner">
      <div class="name">Niniane Wang</div>
      <div class="role">CTO, Minted</div>
    </div>
    <div class="footer">Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </div>
  </div>
</div>

<div class="name-tag">
  <div class="outer">
    <div class="logo">JSSummit<span>2015</span></div>
    <div class="tagline">Online JavaScript Conference</div>
    <div class="inner">
      <div class="name">Tim Berners-Lee</div>
      <div class="role">Web Developer</div>
    </div>
    <div class="footer">Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </div>
  </div>
</div>

<script id="myNametag" type="text/x-handlebars-template">
<div class="name-tag">
  <div class="outer">
    <header>JSSummit<span>2015</span>
      <p>Online JavaScript Conference</p>
    </header>
    <main>
      <p class="name">{{person.fullname}}</p>
      <p class="role">{{person.role}}</p>
    </main>
    <footer>Follow us on Twitter @JSSummit<br>
      Follow the conversation using #JSSummit
    </footer>
  </div>
</div>
</script>

<name-tag>
    <p class="role">Speaker</p>
    <p class="name">Estelle Weyl</p>
</name-tag>
<name-tag>
    <p class="name">Niniane Wang</p>
    <p class="role">CTO, Minted</p>
</name-tag>
<name-tag>
    <p class="name">Tim Berners-Lee</p>
    <p class="role">Web Developer</p>
</name-tag>

Order of role / name doesn't matter

template (n) - A document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.

The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

In a rendering, the template element represents nothing

• Inert until activated: content available only at runtime
• No side effects: scripts don't run, images don't load, video doesn't play until template is used.
• Outside of DOM: child nodes don't exist in DOM. Can't querySelector() content
• Placable anywhere: head, body, iframe.
• Could be used as a performance hack

Designers can create rich web user interaction (UI) using CSS and HTML markup only. Developers can focus on integrating the design elements.

1. Feature detect
2. Declare template content
3. Activate content

if('content' in document.createElement('template')) {
  // put template code here
} else {
  //polyfill
}

Clonable DOM that does nothing until activated

• <template>
• <style>
• content
• <content> (in Shadow DOM spec)
• <script>

<div class="name-tag">
  <p class="role">Speaker</p>
  <p class="name">Estelle Weyl</p>
</div>
<div class="name-tag">
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</div>
<div class="name-tag">
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</div>

• Nothing!
  • inert
  • invisible
  • inactive
• Reuseable
• Importable
• Can have scoped CSS

<content>: insertion point that projects the text from the shadow host to shadow root.

<div class="name-tag">
  <p class="role">Speaker</p>
  <p class="name">Estelle Weyl</p>
</div>
<div class="name-tag">
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</div>
<div class="name-tag">
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</div>

<content>: insertion point that projects the text from the shadow host to shadow root.

<content select=".classInHost"> looks inside the shadow host for any element with a matching class of .classInHost. If an element in the shadow host has the class of classInHost, its contents will be rendered in the shadow DOM.

<div class="name-tag">
  <span class="role">Speaker</span>
  <span class="name">Estelle Weyl</span>
</div>

<script>
    var host = document.querySelector('.name-tag');
    var root = host.createShadowRoot();
    var template = document.querySelector('#nameTagTemplate');
    root.appendChild(template.content);
</script>

<content></content>
<content select=""></conent>
<content select="*"></content>

• Not available to the rest of the page
  • Page-wide CSS doesn't impact it
  • CSS selectors don't target it
  • JavaScript is not aware of it
  • Nodes are not part of the regular DOM
• Attributes of parent node can configure it
• Shadow CSS is scoped
• JavaScript can access via shadowRoot
• <content> is part of Shadow DOM spec

* {color: red;}

<div class="spirit"></div>
<script>
  var host = document.querySelector('.spirit');
  var root = host.createShadowRoot();
  root.innerHTML = "<p>Just because you see me," +
       "does that mean I really exist?</p>";
</script>

/* unknown elements are unresolved */
:unresolved {
    opacity: 0; /* hide until resolved
  }
/* by default elements are always display:inline. */
:host {
    display: block;
  }
/* target the parent node by class or id */
:host(.customElementsClass) {
  ...
}
:host(:hover) { opacity: 1; }
:host(:active) { ... }

 var root = host.createShadowRoot();

shadow root: 1st node of your shadow tree. Ancestor to all other nodes in the tree.

Shadow host content is not rendered. Rather, shadow root content gets rendered.

while the shadow root is not accessible via the DOM, it is manipulated exactly like the DOM:

document.querySelectorAll('.outer').length === 0

var header = document.createElement('h1');
root.appendChild(header);

<!--#exec cgi="/cgi-bin/template.pl" -->

if('import' in document.createElement('link')) {
  // you're good
} else {
  // you need to polyfill
}

<head>

  ....

  <link rel="import" href="/path/file.html">

  <link rel="import" href="//mysite.com/file.html">

  <link rel="import" href="https://CORSEnabled.com/file.html">

</head>

<head>

  ....

  <link rel="import" href="nameTagTemplate.html">

</head>

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Import a template</title>
  <script src="import.js"></script>
  <link rel="import" href="nametagtemplate.html"
      onload="loadHandler(event)" onerror="errorHandler(event)">
</head>
<body>
<div class="name-tag">
  <p class="role">Speaker</p>
  <p class="name">Estelle Weyl</p>
</div>
<div class="name-tag">
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</div>
<div class="name-tag">
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</div>
</body>
</html>

<template id="nameTagTemplate">
<style>
    .outer {
      border: 1px solid black;
      background: url(../assets/wood.jpg) cover rgb(222,122,91);
      width: 21rem;
      font-size: 2.5rem;
      text-align: center;
      font-family: Rockwell, serif;
      color: white;
      margin-bottom: 1rem;
    }
    header {
      font-weight: bold;
      padding: 10px 0 0 0;
    }
    header span {
      color: #ccc;
      font-weight: normal;
    }
    p, footer {
      font-size: 1rem;
      font-weight: normal;
      margin: -5px 0 10px 0; padding: 0;
    }
    main {
      background: white;
      color: black;
      font-family: sans-serif;
      font-size: 1.8rem;
      height: 12rem;
      padding-top: 0.2em;
    }
    .name,
    main:first-line {
      font-weight: bold;
      font-size: 2.3rem;
      margin-bottom: 1rem;
    }
    footer {
      margin: 10px 0 2rem;
    }
</style>


<div class="outer">
  <header>JSSummit<span>2015</span>
    <p>Online JavaScript Conference</p>
  </header>
  <main>
  <content select=".name"></content>
  <content select=".role"></content>
  </main>
  <footer>Follow us on Twitter @JSSummit<br>
    Follow the conversation using #JSSummit
  </footer>
</div>
</template>

function loadHandler(e) {
  var content = document.querySelector('link[rel="import"]').import;
  var el = document.querySelectorAll('.name-tag');
  var template = content.getElementById('nameTagTemplate');
  for(var i = 0; i < el.length; i++) {
    var shadow = el[i].createShadowRoot();
    var clone = document.importNode(template.content, true);
    shadow.appendChild(clone);
  }
}
function errorHandler(e) {
  console.log('Error loading import: ' + e.target.href);
}

• The import can access its own DOM and the DOM of the importing document
  • window.document refers to main document
  • importLinkFile.import refers to the imported document where importedLinkFile is link[rel=import]
• <link> must have rel="import"

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>What happens to imported content</title>
  <script src="import.js"></script>
  <link rel="import" href="template_textmediajs.html" id="foo">
</head>
<body><p>A template has been imported that has an H1, image and an alert, and we added some javascript!</p>

  <script>
    var myLink = document.getElementById('foo');
    var myTemplate = myLink.import.querySelector('template');
    var clonedTemplate = document.importNode(myTemplate.content, true);
    document.querySelector('body').appendChild(clonedTemplate);
  </script>
</body>
</html>

Inactive until activated:

• http://bit.ly/121oPBf - inactive
• http://bit.ly/1uPMpXI - activated

imported <template>

<template>
  <h1>This is some text</h1>
  <img src="../assets/icons/icon-templates.png" alt="this is some media">
  <script>alert("This is some javascript");</script>
</template>

• Include and reuse documents or document fragments
• Shared dependencies are only loaded once.
• Import has to be same origin, or CORS.
• doc and import share window but not document

<script>
  // the "importee", in this case the template
  var importedDoc = document.currentScript.ownerDocument;

  // the "importer", which has custom elements
  var parentDoc = document;

  parentDoc.body.appendChild(importedDoc.importNode(content, true));
</script>

<name-tag>
  <p class="name">Estelle Weyl</p>
  <p class="role">Speaker</p>
</name-tag>
<name-tag>
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</name-tag>
<name-tag>
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</name-tag>

<div is="name-tag">
  <p class="name">Estelle Weyl</p>
  <p class="role">Speaker</p>
</div>
<div is="name-tag">
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</div>
<div is="name-tag">
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</div>

1. Name the element: all lower-case and must contain a U+002D hyphen.
2. Define a prototype
3. Register the Element

The custom element that you import creates a shadow DOM from a <template> then registers itself.

• Imports can execute script, so use imports to define and register custom elements.

1. createdCallback
   invoked after custom element is created, registered and prototype set.
2. attachedCallback
   custom element is inserted
   Event handlers get added here
3. detachedCallback
   custom element is removed
4. attributeChangedCallback
   custom element's attribute is added, changed or removed.

registerElement(custom-element)

var CustomElement = document.registerElement('custom-element');
document.body.appendChild(new CustomElement());

or

registerElement(custom-element, prototype)

var CustomElement = document.registerElement('custom-button', {
  prototype: Object.create(HTMLVideoElement.prototype)
});

var btnProto = Object.create(HTMLButtonElement.prototype);
btnProto.createdCallback = function () {
  console.log('custom element was created');
}
btnProto.attachedCallback = function (){
  console.log('custom element was added') ;
}
btnProto.detachedCallback = function () {
  console.log('custom element was removed');
}
btnProto.attributeChangedCallback = function (attr, old, newA)  {
  console.log('attributes were altered');
}
var btnProto = document.registerElement('my-button', {
  prototype: btnProto
});

class MyButton extends HTMLButtonElement {
  createdCallback () {
    console.log('custom element was created');
  }
  attachedCallback () {
    console.log('custom element was added');
  }
  detachedCallback () {
    console.log('custom element was removed');
  }
  attributeChangedCallback (attr, old, newA) {
    console.log('attributes were altered');
  }
}
document.registerElement('my-button', MyButton);

var MyButton = document.registerElement('my-button', HTMLButtonElement);

var MyButton = document.registerElement('my-button', {
  prototype: Object.create(HTMLButtonElement.prototype)
});

var YourButton = document.registerElement('your-button', {
  prototype: MyButton
});

var myButton = new MyButton();
myButton.textContent = 'some content';
document.body.appendChild(myButton);

or, simply

<my-button>some content<my-button>

var yourButton = document.createElement('button', 'your-button');
yourButton.textContent = "I am extended"
document.body.appendChild(yourButton);

which creates:

<button is="your-button">I am extended<button>

<style>
my-element {
    display: block; }
my-element:unresolved {
    opacity: 0; }
my-element::shadow {
    /*target the shadow root */ }
::shadow p {
    /* any p within any shadow root */ }
</style>
<head>
<body class="classInImporter">
  <my-element></my-element>
</body>

  <template>
    <style>
      :host-context(.classInImporter) { ... }
    </style>
    .... <!-- html template for <my-element> -->
  </template>
    

<body class="classInImporter">
  <my-element></my-element>
</body>

<name-tag>
  <p class="name">Estelle Weyl</p>
  <p class="role">Speaker</p>
</name-tag>
<name-tag>
  <p class="name">Ninian Wang</p>
  <p class="role">CTO, Minted</p>
</name-tag>
<name-tag>
  <p class="name">Tim Berners-Lee</p>
  <p class="role">Web Developer</p>
</name-tag>

var nameTag = Object.create(HTMLElement.prototype);

nameTag.createdCallback = function() {
   var template = document.getElementById('nameTagTemplate').content;
   var clone = template.cloneNode(true);
   var root = this.createShadowRoot();
   root.appendChild(clone);
 };

document.registerElement('name-tag', {
  prototype: nameTag
});

Thank you

www.standardista.com

@estellevw

http://estelle.github.io/components

• Deck at estelle.github.io/components
• All resources linked via the arrows (➹)
• Polymer-Project.org
• WebComponents.org
• CustomElements.io
• My Twitter * My Blog * My Talks * My Github * My Books & Videos