Web Components Re-Introduction

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
November 04, 2017

Web Components Re-Introduction

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

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

November 04, 2017
Tweet

Transcript

  1. 1PMZNFS+BQBO.FFUVQ  4IPHP4FOTVJBLB!DI 8FC$PNQPOFOUT 3F*OUSPEVDUJPO 1IPUPCZ4BSBI$SVUDIFMEPO6OTQMBTI

  2. !DI

  3. ௒଎ 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 ⳿晛䪮遭鐰锷爡 涪㡰
  4. 8FC$PNQPOFOUT הכז׿׊

  5. 8FCDPNQPOFOUTBSFBTFUPGXFC QMBUGPSN"1*TUIBUBMMPXZPVUPDSFBUFOFX DVTUPN SFVTBCMF FODBQTVMBUFE)5.-UBHT UPVTFJOXFCQBHFTBOEXFCBQQT $VTUPNDPNQPOFOUTBOEXJEHFUTCVJMEPO UIF8FC$PNQPOFOUTUBOEBSET XJMMXPSL BDSPTTNPEFSOCSPXTFST

    BOEDBOCFVTFE XJUIBOZ+BWB4DSJQUMJCSBSZPSGSBNFXPSL UIBUXPSLTXJUI)5.-WJBIUUQTXFCDPNQPOFOUTPSH
  6. 8FC$PNQPOFOUTכծؕأةيדֹגծⱄ ⵃ欽䚍ח㺡׫ծؕفإٕ⻉ׁ׸׋)5.-銲 稆׾倜׋ח㹀纏דֹ׷8FCفٓحزؿؓ٦ يך"1*纇דׅկ8FC$PNQPOFOUTַ׵䧭 ׷؝ٝه٦طٝزװؐ؍آؑحزכծוך ٌتٝـٓؐؠד׮⹛⡲׃ծ֮׵ײ׷ +BWB4DSJQUٓ؎ـٓٔװؿٖ٦يٙ٦ؙה ⢘欽דֹתׅկ

  7. 8FC"VEJP$POUSPM-JWF%FNP IUUQBHFLUNSHJUIVCJPXFCBVEJPDPOUSPMTTBNQMFIUNM

  8. <webaudio-knob diameter="64" max="100" sprites="100" src="img/knob.png" step="1" tooltip="tooltip" value="50"> </webaudio-knob>

  9. GBODZCVUUPO

  10. <button> fancy button </button> button { background: #0086b3; color: white;

    border-radius: 0.5em; border: none; } ְתתדךװ׶倯
  11. <fancy-button> fancy button </fancy-button> ֿ׸ַ׵ךװ׶倯

  12. 8FC$PNQPOFOUT ׾圓䧭ׅ׷"1*纇

  13. ‣ $VTUPN&MFNFOUTؕأةي銲稆׾倜׋ח㹀纏ׅ׷ ‣ 4IBEPX%0.)5.-銲稆חأ؝٦ف׾⡲׷ ‣ 5FNQMBUFTꬊ崞䚍ז)5.-銲稆׾㹑鎉ׅ׷ ‣ &4.PEVMFT+4ؿ؋؎ٕ׾+BWB4DSJQUדٗ٦سׅ׷

  14. class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open'

    }).innerHTML = ` <style>button { … }</style> <button><slot></slot></button> `; } } customElements .define('fancy-button', FancyButton);
  15. $VTUPN&MFNFOUT ‣ 倜׃ְ)5.-銲稆׾㹀纏ׅ׷ ‣ ؕأةي銲稆ךせ⵸חכع؎ؿٝ׾ろ׭׷ ‣ JT㾩䚍ח״׷)5.-銲稆ך䭁䓸כQFOEJOH⚥ ‣ 銲稆ךٓ؎ؿ؟؎ؙٕ ‣

    ؎ٝأةٝأָ欰䧭ׁ׸׋ծ)5.-سًُؗٝزח鷄 ⸇⵴ꤐׁ׸׋ծ㾩䚍⦼ח㢌刿ָ֮׏׋ծזו
  16. class FancyButton extends HTMLElement { constructor() { ... } connectedCallback()

    { ... } disconnectedCallback() { ... } attributeChangedCallback() { ... } } customElements .define('fancy-button', FancyButton); 䮶׷莸ְ׾㹀纏ׅ׷ ؕأةي銲稆׾涫ꐮׅ׷
  17. 4IBEPX%0. ‣ )5.-銲稆ח4IBEPX%0.׾欰װׅ ‣ 4IBEPX%0.כمأز銲稆ך⚅歲ַ׵䎁幧ׁ׸זְ ‣ 㼔欽ך)5.-銲稆ה$44إؙٖة ‣ TMPUծDPOUFOUծTMPUUFE

  18. 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.׾⿫撑ׅ׷
  19. 5FNQMBUFT ‣ ꬊ崞䚍ז)5.-銲稆׾㹑鎉ׅ׷ ‣ TDSJQU銲稆זוח״׷،فٗ٦ثָ♶銲חז׏׋ ‣ +BWB4DSJQU♳ד⢪ֲחכ♶⤑׌ָ˘ ‣ 1PMZNFS-BCTMJUIUNMד5FNQMBUF-JUFSBMַ׵⢪ִ׷ ‣

    5FNQMBUFQBSUT"1*ָ勻׷ַ׮׃׸זְ
  20. UFNQMBUF銲稆׾⢪ֲ ꬊ崞䚍ז)5.-׾⿫撑ׅ׷ <template> <p>This is an image</p> <img src="foo.jpg" alt="">

    </template> document .querySelector('template').content;
  21. &4.PEVMFT ‣ 㢩鿇+BWB4DSJQUؿ؋؎ٕ׾ٗ٦سׅ׷ ‣ +BWB4DSJQUך俑岀ד꫼涸ח鍑寸ׅ׷ ‣ TDSJQUUZQFˑNPEVMF˒PSTDSJQUOPNPEVMF ‣ 剑鵚כ%ZOBNJD*NQPSUהְֲ➬圫׮֮׷ ‣

    JNQPSU ًاحسד⹛涸חٗ٦سׅ׷ ‣ )5.-*NQPSUTךֿהכ䘌׸״ֲ ‣ )5.-.PEVMFTָ勻׷ַ׮׃׸זְ
  22. ٌآُ٦ٕ׾FYQPSUׅ׷ ꫼涸חJNQPSUׅ׷ export default class FancyButton { ... } import

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

    ✅ ✅ ✅ ✅ ✅ ✅ ـٓؐؠ؟ه٦ز䎃ⱴ
  24. 8FC$PNQPOFOUT ׾⢪ֲ䩛갫銲秈

  25. ΍㹀纏ׅ׷  ؕأةي銲稆׾&4ךؙٓأ 圓俑ד㹀纏׃ծؿ؋؎ٕחׅ׷  ꧵䕎׾UFNQMBUF銲稆ַ +BWB4DSJQUך俑㶵⴨ד⡲׷  BUUBDIFE$BMMCBDLד TIBEPX3PPU׾欰װׅ

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

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

    './fancy-button.js'; customElements .define('fancy-button', FancyButton); </script>
  28. 8FC$PNQPOFOUTTBOECPY IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

  29. 5IBOLZPV✨ !DI "DI 1IPUPCZ#JFM.PSSPPO6OTQMBTI