The Return of Inspector Web

Inspector Pony by

I'm Angelina Fabbro

I'm from Vancouver, Canada


follow for slides & pandavangelism

Once upon a time...

...I gave a talk on web components

Watch here

Web Components are the new HTML 5

Shadow DOM

Key Concepts:

<ul id="cats">
      <img src="">
    <li class="awesome">
      <img src="">
    <li class="awesome">
      <img src="">
var cats = document.getElementById('cats');
var shadow_cats = cats.createShadowRoot();
shadow_cats.innerHTML = "<li>The awesome cats are:</li><content select='.awesome'></content>"


The @host rule for CSS

@host {
  display: block;
  padding: 40px;
  border: 2px dotted purple;



formerly ::distributed(li)

.awesome::content li


var component = document.createElement('div');
var root = component.createShadowRoot();
var control = document.createElement('div');
control.pseudo = 'control';
component::part(control) {
  width: 20px;
  height: 20px;
  color: blue;
  border-radius: 20px

Shadow DOM Browser Support

HTML Templates

<template id="cats-template">
  <style scoped>
    ul {
      list-style-type: none;
    ul li {
      padding: 2%;
      border-radius: 10px;
      border: 2px dashed blue;
      float: left;
      margin: 0 5% 5% 0;
    <li><img src=""></li>
    <li><img src=""></li>
    <li><img src=""></li>
var host = document.getElementById('host');
var shadow = host.createShadowRoot();


<style scoped> Browser Support

HTML Templates Browser Support

HTML Imports

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


Browser Support

Custom Elements


var XFoo = document.register('my-widget');
document.body.appendChild(new MyWidget());
var MyWidget = document.register('my-widget', {
  prototype: Object.create(HTMLElement.prototype)

Custom Tags


Type Extensions

new MyWidget()
<div is="my-widget"></div>


my-widget {
  opacity: 1;
  transition: opacity 200ms;

my-widget:unresolved {
  opacity: 0;

Browser Support for document.register

More On Custom Tags Shortly!

Type Extensions

aka <element> element

Takin' a Nap Because Problems

Removed from the spec

Extensive details here

Obligatory mention: Decorators

<decorator id="details-open">
      <a id="summary">
        <content select="summary"></content>
details[open] {
  decorator: url(#details-open);
<details open>
      <li>Cuckoo clock

Polyfills, Libraries, and Frameworks

X-Tags and Brick

<!DOCTYPE html>
    <!-- 1. Load X-Tags/Brick Stuff -->
    <link rel="stylesheet" type="text/css" href="brick-1.0beta8.css"/>
    <script type="text/javascript" src="brick-1.0beta8.js"></script>
    <!-- 2. Declare the component by its tag. -->

Polymer Project

web components + sugar

e.g. MDV, Pointer Events

<!DOCTYPE html>
    <!-- 1. Load Polymer -->
    <script src="polymer.min.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
    <!-- 3. Declare the component by its tag. -->

Polymer: 168k

Angular: 81k

X-Tag: 63k

The Price of Compatibility

Obligatory mention: Angular Directives

<!-- 1: as an attribute declaration -->
<a custom-button>Click me</a>

<!-- 2: as a custom element -->
<custom-button>Click me</custom-button>

<!-- 3: as a class (used for old IE compat) -->
<a class="custom-button">Click me</a>
myApp.directive('customButton', function () {
  return {
    templateUrl: 'templates/customButton.html'
    // directive stuff...

Obligatory mention: Ember Components

The Extensible Web Manifesto

Tighten the feedback look between devs and spec!

Identify patterns in dev? Give feedback.


Mozilla AppMaker

Choice Resources

Thanks Fronteers!


Angelina Fabbro