Breaking the 5th Wall

Web Components Revolution

Rob Dodson

  • Web Components?
  • The Specs
  • Use ‘em Today!

How do you use Bootstrap/jQuery UI/etc?

  1. Go to docs
  2. Copy all the things
  3. Get widget
  4. Repeat

We can do better. Just use the thing. Web Components!

  1. Create your own HTML elements
  2. Encapsulate your styles
  3. React with lifecycle callbacks

Web components use the same tools that the browser makers use.


  ## O hai!
  ### how _you_ doin?
  [Link me!](

What are Web Components?

Templates: Scaffolding
Shadow Dom: Encapsulation
Custom elements: Extensions
Imports: Packaging


Inner chunks of DOM that we can re-use throuought the page.

<template id="my-widget">
  <h1 id="need-a-better-customer-try-gamification">Need a Better Customer? Try Gamification!</h1>

<p>Gregory Menvielle<br />
<a href="">@pyramedium</a></p>

<p>Gamification is the use of game thinking and game mechanics to engage users in solving problems… sort of.</p>

<h2 id="gamification-works">Gamification Works</h2>
  <li>Fold It</li>
  <li>Candy Crush Saga</li>
  <li>So does crack cocaine…
      <li>Just because something works doesn’t mean it’s good for your users</li>

<p>It’s about psychology. Messing with someone’s mind is simple. Be careful with your end users.</p>

<h3 id="recommended-reading">Recommended Reading</h3>
  <li><a href="">Stanford Prison Experiment</a></li>
  <li>Thinking, Fast and Slow - Daniel Kahneman</li>

<p>Intrinsic rewards.</p>


<h2 id="five-steps">Five Steps</h2>
  <li>Mitigate Failure</li>
  <li>Promote Growth</li>

<h2 id="intrinsic-gamification-i-want-x">Intrinsic Gamification (I want X)</h2>

<h3 id="completion-levels">Completion Levels</h3>
  <li>Make sure it goes all the way to 100%</li>
  <li>Make sure there’s a path forward</li>

<h3 id="avatars">Avatars</h3>

<h2 id="extrinsic-if-you-do-x-you-get-y">Extrinsic (If you do X you get Y)</h2>

<p>They won’t work in the long run.</p>

<p>Digital Meth</p>

<h3 id="leaderboards">Leaderboards</h3>

<p>Everyone just cares about imaginary internet points. But then people get tired of it. Everyone will just hack your system.</p>

<h3 id="badges-and-rewards">Badges and Rewards</h3>

<p>Same thing, people get tired of it.</p>

<h2 id="closing">Closing</h2>
  <li>Focus on intrinsic value</li>
  <li>Users are Humans, be nice to them</li>
  <li>Extrinsic rewards bring short term games</li>
  <li>People are motivated by:




No built-in data interpolation `` don’t do anything yet Nested templates are not automatically activated

Works on Chrome/Mobile Chrome, Firefox, Opera/Opera Mini

Shadow Dom

Huge topic

Provides Style and markup encapsulation

Same technology used by browser makers to implement <video> etc.

Shadow Host : node contains all our shadow dome , shadow root : first node, shadow nodes, shadow tree, shadow boundary : container


Can put styles inside the <template>

applyAuthorStyles allows authors to style your elements


You can poke holes in the shadow boundary using part

.widget::part("foo") { color: red; }

Insertion points use <content> takes stuff inside the shadow host and puts it into the shadow dom. Specific content can be selected with “select” attribute.

Browser support: chrome/mobile chrome, opera/opera mini.

Custom Elements

Templates + Shadow DOM = Custom elements

document.register('tag-name', {
  prototype: proto

Lifecycle Callbacks

  • createdCallback() Use like constructor
  • enteredViewCallback() When an element is added to the page
  • leftViewCallback() When an element is removed, cleanup
  • attributeChangedCallback(attrName, oldVal, newVal) When one of an elements attributes changes

Type extension elements, use extends, and is="my-element

Ignore blog posts about <element> for now, right now only method for creating element is Javascript.


Imports load external documents into our page

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

Like CSS, just assume it’s there and work. Browser support: Chrome with a flag

Use ‘em Today


A collection of polyfills which let us use web components in all modern browsers. Also a framework for building web applications with web components. Looks a lot like angular, from Google so maybe similar codebase? Probably work together