# Web Components 2016 & Polymer v2
2016.10.09 [DevFest Tokyo 2016](http://gdg-tokyo.connpass.com/event/38927/) [@1000ch](http://twitter.com/1000ch)
## @1000ch
- 株式会社サイバーエージェント
- Web 技術とか iOS とかいろいろ
- [https://1000ch.net](https://1000ch.net) の人
## アジェンダ
- Web Components おさらい
- 最近の Web Components 事情
- Polymer v2 is coming !!
# Web Components
## 「Web のコンポーネント」の難しさ
〜 Web 開発者が戦ってきたもの 〜
## 再利用可能な Web のコンポーネント
- それを **作る難しさ** と **使うコスト**
- 特定のライブラリへの依存問題
- エコシステムが醸成されない問題
- 容赦なくグローバルを汚染する問題
## CSS だけはどうにもならない
CSS はつらい。 本当につらい。
## Web 標準技術を組み合わせて実現する（重要）
- アプローチはどれも特定のツールや手法に依存してきた
- **Web のコンポーネント** を作る手法が一般化される
- 「そうだ、 [Extensible Web](http://jxck.hatenablog.com/entry/extendthewebforward) だ」
## Web Components
# 最近の Web Components 事情
## Shadow DOM v1 と
## Shadow DOM v1
- `createShadowRoot()` から `attachShadow()` へ
- Opened な Shadow DOM と Closed な Shadow DOM
- 複数 `Shadow Root` の廃止
- [Shadow Root をホストできる要素が限定的に](https://dom.spec.whatwg.org/#dom-element-attachshadow)
- `` から `` へ
## `createShadowRoot()` から
## Opened な Shadow DOM
## 複数 `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回以上実行すると例外が発生する
## 制限された
## `` から `` へ
`` で指定していた Insertion Points は、 `` に代わり Slots と表現されるようになる。セレクタで指定していたのが、 `` のような[スロット名の完全一致で挿入される](http://codepen.io/1000ch/pen/ALVkYX)。
```html
Button
```
```html
Button
```
## [What's New in Shadow DOM v1 (by examples)](http://hayato.io/2016/shadowdomv1/)
http://hayato.io/2016/shadowdomv1/
更なる詳細はこちらの神資料を参照のこと
## Custom Elements v1
- ES2015 class ベースの要素定義
- ライフサイクルコールバックの見直し
- `document.registerElement` から `window.customElements` へ
## Custom Elements v0
```html
```
## Custom Elements v1
```html
```
## `window.customElements`
```javascript
// コンストラクタの参照
const FooElement = customElements.get('foo-element');
// が定義されたタイミング
customElements.whenDefined('foo-element').then(() => {
console.log('foo-element is defined');
});
```
## カスタム要素が定義されるタイミングを待ちたい？
不完全な状態でページが表示されるのを避けるには、 `:defined` だけでは難しいため
[Issue #427 · w3c/webcomponents](https://github.com/w3c/webcomponents/issues/427)
## `is` 属性の行方…
WebKit は `
## HTML Imports どうなった
- [Mozilla は ES6 Modules を意識して見送っている](https://hacks.mozilla.org/2014/12/mozilla-and-web-components/)
- [JavaScript Loader](https://github.com/whatwg/loader) あたりの話
- `` のアセット解決方法
- [The state of Web Components](https://hacks.mozilla.org/2015/06/the-state-of-web-components/)
## ブラウザサポート状況
- **Shadow DOM v0**: Chrome, Firefox w/flag, Safari 10, Opera
- **Shadow DOM v1**: Chrome 53, Opera 40, Safari 10
- **Custom Elements v0**: Chrome, Firefox w/flag, Opera
- **Custom Elements v1**: Chrome 54, Opera 41, Safari TP 14
- **HTML Imports**: Chrome, Firefox w/flag, Opera
- **Templates**: Chrome, Firefox, Safari, Opera, Edge
## Safari 10 に Shadow DOM v1 が実装された (❗)
[iOS 10のシェア](https://mixpanel.com/trends/#report/ios_10/from_date:-3,report_unit:hour,to_date:0)次第だが、時間の問題
## Safari TP 14 に Custom Elements v1 が実装された (❗❗)
_メニューの Develop → Experimental Features → Custom Elements_
## Safari の実装が進むのは、開発者にとってかなり大きい
- モバイルでの利用は現実的になってきた😍
- あとは Firefox と Edge を応援するだけ👆
- IE... (´・ω・`).;:...(´・ω...:.;::..(´・;::: .:.;: ...
## Edgeに実装を進めてもらおう
みんなで [Shadow DOM (unprefixed)](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263785-shadow-dom-unprefixed) と [Custom Elements](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6261298-custom-elements) に投票しよう！
# Polymer v2
## Polymer 2.0 Preview
[Polymer/polymer](https://github.com/Polymer/polymer) リポジトリの `2.0-preview` ブランチ
## 日本語訳
[Polymer Summit 2016](https://www.polymer-project.org/summit/) in London on October 17-18
## Polymer v2 のロードマップ
- Web Components **"v1"** の機能のフルサポート
- Polymer `v1.x` からのスムースなマイグレーション
- 標準にそぐわない "leaky" な抽象化を排除
- Polymer 内部のデータシステムの改善
## Polymer v1.x
```javascript
const MyElement = Polymer({
is: 'my-element',
created: function () {},
attached: function() {},
detached: function() {},
attributeChanged: function() {},
ready: function() {}
});
```
## Polymer v2
```javascript
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 v1.x の機能は引き続き提供されるが…
## Type Extension の
...
```
## Polymer v2 でも
...
```
## Web Components "v1"
[https://elements.polymer-project.org/](https://elements.polymer-project.org/)
## Polymer Elements
v2 のリリースに伴いアップデートされるが、
## Polymer v2-preview
# まとめ
## スペックに関して
- Shadow DOM v1 も Custom Elements v1 も順当にリデザインされてる
- Shadow DOM は既に [v2](https://github.com/w3c/webcomponents/labels/v2) に関する議論がはじまっている
- HTML Imports だけは先行きが若干不安だが、ひとまず `webcomponents.js` のポリフィルに頼る
- WebKit の実装進捗によって **モバイル利用が現実的になりつつある**
## 使い方に関して
- スコープを解決するためのツールは沢山でてきたが、ツールありきのアプローチでは可搬性が担保されない
- 今こそみんなで使っていこう（流行らなければ過去の遺物になってしまう）
- 開発の未来は **C** omponent **D** riven **D** evelopment
# おわり
[@1000ch](http://twitter.com/1000ch)