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

Web Components Re-Introduction

Shogo Sensui
November 04, 2017

Web Components Re-Introduction

2017年11月4日に開催された Polymer Japan Meetup #1 の「Web Components Re-Introduction」のセッション資料です。

Shogo Sensui

November 04, 2017
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. ௒଎ Webϖʔδ ଎౓վળ ΨΠ υ ࢖8xNJd Č଎Jč @~࢝s € :

    H E ϖ ồ δ ଎ ౓ վ ળ Ψ Π υ ࢖ 8 x N J d Ĝ ଎ J ĝ @ ~ ࢝ s € ࠤ౻า ઘਫᠳޗ ࠤ ౻  า ઘ ਫ  ᠳ ޗ À Ø Þ ³Þ ´cجຊ ࣮૷c࠷దԽ Chrome DevTools ࠷৽Webٕज़ ÁÔ Ž¡ॲཧcޮ཰Խ ×Þ«Õ Þšॲཧö ¤™ Õ Â ³ॲཧö ¸¯ ³ÙĻ™ॲཧ HTMLö CSSö JavaScriptö ը૾ ܭଌăௐࠪăվળc›Ļ¤¤ª²  HTTP/2ö Service Workerö Resource Hints GPUö ÌÍÕ؅ཧö —Ï ¯¢ Ñ ௒଎ S a t o A y u m u S e n s u i S h o g o WEB+DB PRESS plus WEB+DB PRESS plus 馄鸞8FCل٦آ 鸞䏝何㊣ؖ؎س 衼罏!BIPNV!DI ⳿晛䪮遭鐰锷爡 涪㡰
  2. <button> fancy button </button> button { background: #0086b3; color: white;

    border-radius: 0.5em; border: none; } ְתתדךװ׶倯
  3. class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open'

    }).innerHTML = ` <style>button { … }</style> <button><slot></slot></button> `; } } customElements .define('fancy-button', FancyButton);
  4. class FancyButton extends HTMLElement { constructor() { ... } connectedCallback()

    { ... } disconnectedCallback() { ... } attributeChangedCallback() { ... } } customElements .define('fancy-button', FancyButton); 䮶׷莸ְ׾㹀纏ׅ׷ ؕأةي銲稆׾涫ꐮׅ׷
  5. const doc = document; const btn = doc.querySelector('button'); const shadowRoot

    = btn.attachShadow({ mode: 'open' // or 'close' }); // readonly property console.log(btn.shadowRoot); 4IBEPX%0.׾欰װׅ 4IBEPX%0.׾⿫撑ׅ׷
  6. ٌآُ٦ٕ׾FYQPSUׅ׷ ꫼涸חJNQPSUׅ׷ export default class FancyButton { ... } import

    FancyButton from './fancy-button.js'; import('./fancy-button.js') .then(FancyButton => FancyButton); ⹛涸חJNQPSUׅ׷
  7. ✅ ✅ $VTUPN&MFNFOUTW 4IBEPX%0.W 5FNQMBUFT &4.PEVMFT ✅ ✅ ✅ ✅

    ✅ ✅ ✅ ✅ ✅ ✅ ـٓؐؠ؟ه٦ز䎃ⱴ
  8. ΍㹀纏ׅ׷  ؕأةي銲稆׾&4ךؙٓأ 圓俑ד㹀纏׃ծؿ؋؎ٕחׅ׷  ꧵䕎׾UFNQMBUF銲稆ַ +BWB4DSJQUך俑㶵⴨ד⡲׷  BUUBDIFE$BMMCBDLד TIBEPX3PPU׾欰װׅ

     ꧵䕎׾؝ؾ٦׃ծTIBEPX3PPUח 㙵׭鴥׬ Ύ⢪ֲ  ؝ٝه٦طٝز׾㹀纏ׅ׷ +BWB4DSJQUؿ؋؎ٕ׾&4 .PEVMFTד؎ٝه٦زׅ׷  ؎ٝه٦ز׃׋ؙٓأ׾ծ DVTUPN&MFNFOUTEFOF דؕأ ةي銲稆ה׃ג㹀纏ׅ׷  㹀纏׃׋ؕأةي銲稆׾)5.- ה׃ג⢪ֲ
  9. ΍㹀纏ׅ׷ class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode:

    'open' }).innerHTML = ` <style>button { … }</style> <button><slot></slot></button> `; } } export default FancyButton;
  10. Ύ⢪ֲ <fancy-button> fancy button </fancy-button> <script type="module"> import FancyButton from

    './fancy-button.js'; customElements .define('fancy-button', FancyButton); </script>