@1000ch

Web アプリケーション開発を専門とするソフトウェアエンジニア。企業で働く傍ら、技術顧問として複数企業のエンジニアリングに関わり、高品質で維持しやすい Web アプリケーションを作るための活動を続けている。

アジェンダ

• Web Components おさらい
• 最近の Web Components 事情
• Polymer v2 is coming!!

再利用可能な Web のコンポーネント

• それを 作る難しさ と 使うコスト
• 特定のライブラリへの依存問題
• エコシステムが醸成されない問題
• 容赦なくグローバルを汚染する問題

CSS だけはどうにもならない

(╯°□°）╯︵ SSƆ

— 1000ch (@1000ch) 2016年7月11日

CSS はつらい。本当につらい。

Web 標準技術を組み合わせて実現する（重要）

• アプローチはどれも特定のツールや手法に依存してきた
• Web のコンポーネント を作る手法が一般化される
• 「そうだ、 Extensible Web だ」

Web Components を支える技術

• Custom Elements: 新たな要素の定義
• Shadow DOM: 隔離された DOM スコープ
• HTML Imports: 断片化した HTML のロード
• Templates: 不活性な HTML 要素

Shadow DOM v1 と Custom Elements v1

これまでのものを v0、新たなものを v1 として、改めて仕様の策定が進んでいる

Shadow DOM v1

• createShadowRoot() から attachShadow() へ
• Opened な Shadow DOM と Closed な Shadow DOM
• 複数 Shadow Root の廃止
• Shadow Root をホストできる要素が限定的に
• <content> から <slot> へ

createShadowRoot() から attachShadow() へ

const div = document.querySelector('div');
const shadowRoot = div.attachShadow({
  mode: 'open' // or 'close'
});

// readonly な shadowRoot プロパティの追加
console.log(div.shadowRoot);

引数に open か close かどうかを指定する（必須）

Opened Shadow DOM と Closed Shadow DOM

外部からアクセスできる Shadow DOM と、アクセスできない Shadow DOM。 Closed Shadow DOM であれば shadowRoot プロパティは null を返す

複数 Shadow Root の廃止

Though multiple shadow roots were originally introduced to support an Inheritance Model for components, Blink has already deprecated this feature even in v0. Do not use multiple shadow roots.

ある要素の attachShadow() を2回以上実行すると例外が発生する

制限された Shadow Host になれる要素

article, aside, blockquote, body, div, footer, h1, h2, h3, h4, h5, h6, header, nav, p, section, span

<content> から <slot> へ

<content> で指定していた Insertion Points は、 <slot> に代わり Slots と表現されるようになる。セレクタで指定していたのが、 <slot name=slot-name> のようなスロット名の完全一致で挿入される。

<content による挿入から

<template>
  <style>
    ::content input { background: skyblue; }
  </style>
  <div>
    <content select=".class-name"></content>
    <content></content>
  </div>
</template>

<form-container>
  <input class="class-name" type="text">
  <button>Button</button>
</form-container>

<slot> による挿入へ

<template>
  <style>
    ::slotted(input) { background: skyblue; }
  </style>
  <div>
    <slot name="slot-name"></slot>
    <slot></slot>
  </div>
</template>

<form-container>
  <input slot="slot-name" type="text">
  <button>Button</button>
</form-container>

What's New in Shadow DOM v1 (by examples)

更なる詳細はこちらの資料を参照のこと

Custom Elements v1

• ES2015 class ベースの要素定義
• ライフサイクルコールバックの見直し
• document.registerElement から window.customElements へ

Custom Elements v0

<script>
  const FooElement = Object.create(HTMLElement.prototype);
  FooElement.createdCallback = () => { ... };
  FooElement.attachedCallback = () => { ... };
  FooElement.detachedCallback = () => { ... };
  FooElement.attributeChangedCallback = () => { ... };

  document.registerElement('foo-element', {
    prototype: FooElement
  });
</script>

Custom Elements v1

<script>
  class FooElement extends HTMLElement {
    constructor() { ... }
    connectedCallback() { ... }
    disconnectedCallback() { ... }
    attributeChangedCallback() { ... }
    adoptedCallback() { ... }
  }

  window.customElements.define('foo-element', FooElement);
</script>

window.customElements

// <foo-element> コンストラクタの参照
const FooElement = customElements.get('foo-element');

// <foo-element> が定義されたタイミング
customElements.whenDefined('foo-element').then(() => {
  console.log('foo-element is defined');
});

is 属性の行方…

今のところ WebKit は <button is="foo-button" /> のような Custom Elements によるネイティブ要素の拡張をしない方針を示している

HTML Imports はどうなった

Mozilla は ES6 Modules を意識して見送っている。The state of Web Components でも触れているように、ES Modules で解決することを支持している

Safari 10 に Shadow DOM v1 が実装された！

iOS 10 のシェア次第だが、時間の問題

Safari TP 14 に Custom Elements v1 が実装された ()

メニューの Develop → Experimental Features → Custom Elements

Safari の実装が進むことは、開発者にとってかなり大きい

• モバイルでの利用は現実的になってきた
• あとは Firefox と Edge を応援するだけ
• IE... (´・ω・`).;:...(´・ω...:.;::..(´・;::: .:.;: ...

Edgeに実装を進めてもらおう

みんなで Shadow DOM (unprefixed) と Custom Elements に投票しよう！

Polymer v2 のロードマップ

• Web Components "v1" の機能のフルサポート
• Polymer v1.x からのスムースなマイグレーション
• 標準にそぐわない "leaky" な抽象化を排除
• Polymer 内部のデータシステムの改善

Polymer v1.x

const MyElement = Polymer({
  is: 'my-element',
  created: function () {},
  attached: function() {},
  detached: function() {},
  attributeChanged: function() {},
  ready: function() {}
});

Polymer v2

class MyElement extends Polymer.Element {
  static get is() { return 'my-element'; }
  static get config() {
    return { /* properties, observers meta data */ };
  }
  constructor() { super(); }
  connectedCallback() { super.connectedCallback(); }
}

customElements.define(MyElement.is, MyElement);

Polymer v1.x の API も一応使える

polymer.html が引き続き提供され、Polymer.dom() や Polymer.CompatElement といった Polymer v1.x で提供されてきた API も含まれる

ネイティブ API へ移行を強く推奨

Polymer で抽象化してきた API が排除されネイティブの API を使うように。例えば、Shady DOM v1 が提供されることで DOM 操作に関しても Polymer.dom() が不要になる

Polymer v2 は is="" をサポートしない

Polymer v1.x の機能は引き続き提供されるが、Type Extension (is="...") の雲行きが怪しいので…

<dom-repeat items="{{items}}">
  <template>...</template>
</dom-repeat>

<custom-style>
  <style>...</style>
</custom-style>

Polymer v2-preview を今すぐ試したい？

$ bower install --save Polymer/polymer#2.0-preview

スペックに関して

• Shadow DOM v1 も Custom Elements v1 も順当にリデザインされてる
• Shadow DOM は既に v2 に関する議論がはじまっている
• HTML Imports だけは先行きが若干不安だが、ひとまず webcomponentsjs のポリフィルに頼る
• WebKit の実装進捗によって モバイル利用が現実的になりつつある

使い方に関して

• スコープを解決するためのツールは沢山でてきたが、ツールありきのアプローチでは可搬性が担保されない
• 今こそみんなで使っていこう（流行らなければ過去の遺物になってしまう）
• 開発の未来は C omponent D riven D evelopment