The Return of Inspector Web

Inspector Pony by 123inkt.nl

I'm Angelina Fabbro

I'm from Vancouver, Canada

@angelinamagnum

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">
    <li>
      <img src="http://lorempixel.com/200/200/cats/1/">
    </li>
    <li class="awesome">
      <img src="http://lorempixel.com/200/200/cats/2/">
    </li>
    <li class="awesome">
      <img src="http://lorempixel.com/200/200/cats/3/">
    </li>
</ul>
var cats = document.getElementById('cats');
var shadow_cats = cats.createShadowRoot();
shadow_cats.innerHTML = "<li>The awesome cats are:</li><content select='.awesome'></content>"

DEMO!

http://afabbro.github.io/webcomponents-native

http://github.com/afabbro/webcomponents-native

The @host rule for CSS

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

Pseudo-Elements

::content

formerly ::distributed(li)

.awesome::content li

::part

var component = document.createElement('div');
var root = component.createShadowRoot();
var control = document.createElement('div');
control.pseudo = 'control';
root.appendChild(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;
    }
  </style>
  <ul>
    <li><img src="http://lorempixel.com/300/300/cats/2/"></li>
    <li><img src="http://lorempixel.com/300/300/cats/4/"></li>
    <li><img src="http://lorempixel.com/300/300/cats/6/"></li>
  </ul>
</template>
var host = document.getElementById('host');
var shadow = host.createShadowRoot();
shadow.appendChild(document.getElementById('cats-template').content);

DEMO!

<style scoped> Browser Support

HTML Templates Browser Support

HTML Imports

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

DEMO!

Browser Support

Custom Elements

<custom-element></custom-element>

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

Custom Tags

vs

Type Extensions

document.createElement('my-widget')
new MyWidget()
<my-widget></my-widget>
<div is="my-widget"></div>

:unresolved

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">
  <template>
      <a id="summary">
        ▾
        <content select="summary"></content>
      </a>
      <content></content>
  </template>
</decorator>
details[open] {
  decorator: url(#details-open);
}
<details open>
    <summary>Timepieces</summary>
    <ul>
      <li>Sundial
      <li>Cuckoo clock
      <li>Wristwatch
    </ul>
</details>

Polyfills, Libraries, and Frameworks

X-Tags and Brick

<!DOCTYPE html>
<html>
  <head>
    <!-- 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>
  </head>
  <body>
    <!-- 2. Declare the component by its tag. -->
    <x-datepicker></x-datepicker>
  </body>
</html>

Polymer Project

web components + sugar

e.g. MDV, Pointer Events

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

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.

Before I go: SOMETHING AWESOME

Mozilla AppMaker

Choice Resources

Thanks Fronteers!

love,

Angelina Fabbro

@angelinamagnum

angelina@mozilla.com