Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components 2016 and Polymer v2

Web Components 2016 and Polymer v2

2016年10月9日に行われた DevFest Tokyo 2016 (https://gdg-tokyo.connpass.com/event/38927/) の Web トラック「Web Components 2016 & Polymer v2」のセッションのスライドです。

Shogo Sensui

October 09, 2016
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. Web Components 2016 & Polymer v2 2016.10.09 DevFest Tokyo 2016

    Web Components 2016 & Polymer v2 by @1000ch 1
  2. アジェンダ Web Components おさらい 最近の Web Components 事情 Polymer v2

    is coming!! Web Components 2016 & Polymer v2 by @1000ch 3
  3. CSS だけはどうにもならない <blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr">(╯°□°)╯︵ SSƆ </p>— 1000ch

    (@1000ch) <a href="https://twitter.com/1000ch/status/752394739438137344">2016年7月11日</a> </blockquote> CSS はつらい。本当につらい。 Web Components 2016 & Polymer v2 by @1000ch 7
  4. Web Components を支える技術 Custom Elements: 新たな要素の定義 Shadow DOM: 隔離された DOM

    スコープ HTML Imports: 断片化した HTML のロード Templates: 不活性な HTML 要素 Web Components 2016 & Polymer v2 by @1000ch 9
  5. Shadow DOM v1 と Custom Elements v1 これまでのものを v0、新たなものを v1

    として、改めて仕様の策定が進んでいる Web Components 2016 & Polymer v2 by @1000ch 11
  6. Shadow DOM v1 createShadowRoot() から attachShadow() へ Opened な Shadow

    DOM と Closed な Shadow DOM 複数 Shadow Root の廃止 Shadow Root をホストできる要素が限定的に <content> から <slot> へ Web Components 2016 & Polymer v2 by @1000ch 12
  7. createShadowRoot() から attachShadow() へ const div = document.querySelector('div'); const shadowRoot

    = div.attachShadow({ mode: 'open' // or 'close' }); // readonly な shadowRoot プロパティの追加 console.log(div.shadowRoot); 引数に open か close かどうかを指定する(必須) Web Components 2016 & Polymer v2 by @1000ch 13
  8. Opened Shadow DOM と Closed Shadow DOM 外部からアクセスできる Shadow DOM

    と、アクセスできない Shadow DOM。 Closed Shadow DOM であれば shadowRoot プロパティは null を返す Web Components 2016 & Polymer v2 by @1000ch 14
  9. 複数 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回以上実行すると例外が発生する Web Components 2016 & Polymer v2 by @1000ch 15
  10. 制限された Shadow Host になれる要素 article , aside , blockquote ,

    body , div , footer , h1 , h2 , h3 , h4 , h5 , h6 , header , nav , p , section , span Web Components 2016 & Polymer v2 by @1000ch 16
  11. <content> から <slot> へ <content> で指定していた Insertion Points は、 <slot>

    に代わり Slots と表現されるよ うになる。セレクタで指定していたのが、 <slot name=slot-name> のようなスロット名の 完全一致で挿入される。 Web Components 2016 & Polymer v2 by @1000ch 17
  12. <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> Web Components 2016 & Polymer v2 by @1000ch 18
  13. <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> Web Components 2016 & Polymer v2 by @1000ch 19
  14. 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> Web Components 2016 & Polymer v2 by @1000ch 22
  15. Custom Elements v1 <script> class FooElement extends HTMLElement { constructor()

    { ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback() { ... } adoptedCallback() { ... } } window.customElements.define('foo-element', FooElement); </script> Web Components 2016 & Polymer v2 by @1000ch 23
  16. window.customElements // <foo-element> コンストラクタの参照 const FooElement = customElements.get('foo-element'); // <foo-element>

    が定義されたタイミング customElements.whenDefined('foo-element').then(() => { console.log('foo-element is defined'); }); Web Components 2016 & Polymer v2 by @1000ch 24
  17. is 属性の行方… 今のところ WebKit は <button is="foo-button" /> のような Custom

    Elements による ネイティブ要素の拡張をしない方針を示している Web Components 2016 & Polymer v2 by @1000ch 26
  18. HTML Imports はどうなった Mozilla は ES6 Modules を意識して見送っている。The state of

    Web Components でも触れ ているように、ES Modules で解決することを支持している Web Components 2016 & Polymer v2 by @1000ch 27
  19. ブラウザサポート状況 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 Web Components 2016 & Polymer v2 by @1000ch 28
  20. Safari TP 14 に Custom Elements v1 が実装された ( )

    メニューの Develop → Experimental Features → Custom Elements Web Components 2016 & Polymer v2 by @1000ch 31
  21. Polymer 2.0 Preview <blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Polymer 2.0 is

    just starting to come together. For a very early look at what's coming, check out: <a href="https://t.co/w6U7L4I0OZ">https://t.co/w6U7L4I0OZ</a></p>— Polymer (@polymer) <a href="https://twitter.com/polymer/status/774379113666654208">2016 年9月9日</a></blockquote> Polymer/polymer リポジトリの 2.0-preview ブランチ Web Components 2016 & Polymer v2 by @1000ch 36
  22. 日本語訳 <blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Polymer 2.0 Preview が公開されていますが、その時のアナウンス内容を日本語訳してみました。興味のあ る方はぜひお読みください。

    <a href="https://t.co/Y9EEERPKCR">https://t.co/Y9EEERPKCR</a> <a href="https://twitter.com/hashtag/polymer?src=hash">#polymer</a> <a href="https://twitter.com/hashtag/html5j?src=hash">#html5j</a></p>— Yoichiro Tanaka (@yoichiro) <a href="https://twitter.com/yoichiro/status/779830672693207041">2016 年9月24日</a></blockquote> Web Components 2016 & Polymer v2 by @1000ch 37
  23. <blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Polymer Summit 2016 registration is now

    open! Join us in London on October 17-18. <a href="https://t.co/gWSEOpy3Sb">https://t.co/gWSEOpy3Sb</a> <a href="https://t.co/Noj4kAsdqd">pic.twitter.com/Noj4kAsdqd</a></p>— Polymer (@polymer) <a href="https://twitter.com/polymer/status/765254100300603393">2016 年8月15日</a></blockquote> Polymer Summit 2016 in London on October 17-18 Web Components 2016 & Polymer v2 by @1000ch 38
  24. Polymer v2 のロードマップ Web Components "v1" の機能のフルサポート Polymer v1.x からのスムースなマイグレーション

    標準にそぐわない "leaky" な抽象化を排除 Polymer 内部のデータシステムの改善 Web Components 2016 & Polymer v2 by @1000ch 39
  25. Polymer v1.x const MyElement = Polymer({ is: 'my-element', created: function

    () {}, attached: function() {}, detached: function() {}, attributeChanged: function() {}, ready: function() {} }); Web Components 2016 & Polymer v2 by @1000ch 40
  26. 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); Web Components 2016 & Polymer v2 by @1000ch 41
  27. Polymer v1.x の API も一応使える polymer.html が引き続き提供され、 Polymer.dom() や Polymer.CompatElement

    とい った Polymer v1.x で提供されてきた API も含まれる Web Components 2016 & Polymer v2 by @1000ch 42
  28. ネイティブ API へ移行を強く推奨 Polymer で抽象化してきた API が排除されネイティブの API を使うように。例えば、Shady DOM

    v1 が提供されることで DOM 操作に関しても Polymer.dom() が不要になる Web Components 2016 & Polymer v2 by @1000ch 43
  29. Polymer v2 は is="" をサポートしない Polymer v1.x の機能は引き続き提供されるが、Type Extension (

    is="..." ) の雲行きが怪し いので… <dom-repeat items="{{items}}"> <template>...</template> </dom-repeat> <custom-style> <style>...</style> </custom-style> Web Components 2016 & Polymer v2 by @1000ch 44
  30. スペックに関して Shadow DOM v1 も Custom Elements v1 も順当にリデザインされてる Shadow

    DOM は既に v2 に関する議論がはじまっている HTML Imports だけは先行きが若干不安だが、ひとまず webcomponentsjs のポリフィ ルに頼る WebKit の実装進捗によって モバイル利用が現実的になりつつある まとめ Web Components 2016 & Polymer v2 by @1000ch 49