Web Components Re-Introduction

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

Transcript

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

   View Slide

2. !DI
   

   View Slide

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
   ⳿晛䪮遭鐰锷爡
   涪㡰
   

   View Slide

4. 8FC$PNQPOFOUT
   הכז׿׊
   

   View Slide

5. 8FCDPNQPOFOUTBSFBTFUPGXFC
   QMBUGPSN"1*TUIBUBMMPXZPVUPDSFBUFOFX
   DVTUPN SFVTBCMF FODBQTVMBUFE)5.-UBHT
   UPVTFJOXFCQBHFTBOEXFCBQQT
   $VTUPNDPNQPOFOUTBOEXJEHFUTCVJMEPO
   UIF8FC$PNQPOFOUTUBOEBSET XJMMXPSL
   BDSPTTNPEFSOCSPXTFST BOEDBOCFVTFE
   XJUIBOZ+BWB4DSJQUMJCSBSZPSGSBNFXPSL
   UIBUXPSLTXJUI)5.-WJBIUUQTXFCDPNQPOFOUTPSH
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. GBODZCVUUPO
   

   View Slide

10. 
    fancy button
    
    button {
    background: #0086b3;
    color: white;
    border-radius: 0.5em;
    border: none;
    }
    ְתתדךװ׶倯
    

    View Slide

11. 
    fancy button
    
    ֿ׸ַ׵ךװ׶倯
    

    View Slide

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

    View Slide

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

    View Slide

14. class FancyButton extends HTMLElement {
    connectedCallback() {
    this.attachShadow({
    mode: 'open'
    }).innerHTML = `
    button { … }
    
    `;
    }
    }
    customElements
    .define('fancy-button', FancyButton);
    

    View Slide

15. $VTUPN&MFNFOUT
    ‣ 倜׃ְ)5.-銲稆׾㹀纏ׅ׷
    ‣ ؕأةي銲稆ךせ⵸חכع؎ؿٝ׾ろ׭׷
    ‣ JT㾩䚍ח״׷)5.-銲稆ך䭁䓸כQFOEJOH⚥
    ‣ 銲稆ךٓ؎ؿ؟؎ؙٕ
    ‣ ؎ٝأةٝأָ欰䧭ׁ׸׋ծ)5.-سًُؗٝزח鷄
    ⸇⵴ꤐׁ׸׋ծ㾩䚍⦼ח㢌刿ָ֮׏׋ծזו
    

    View Slide

16. class FancyButton extends HTMLElement {
    constructor() { ... }
    connectedCallback() { ... }
    disconnectedCallback() { ... }
    attributeChangedCallback() { ... }
    }
    customElements
    .define('fancy-button', FancyButton);
    䮶׷莸ְ׾㹀纏ׅ׷
    ؕأةي銲稆׾涫ꐮׅ׷
    

    View Slide

17. 4IBEPX%0.
    ‣ )5.-銲稆ח4IBEPX%0.׾欰װׅ
    ‣ 4IBEPX%0.כمأز銲稆ך⚅歲ַ׵䎁幧ׁ׸זְ
    ‣ 㼔欽ך)5.-銲稆ה$44إؙٖة
    ‣ TMPUծDPOUFOUծTMPUUFE
    

    View Slide

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.׾⿫撑ׅ׷
    

    View Slide

19. 5FNQMBUFT
    ‣ ꬊ崞䚍ז)5.-銲稆׾㹑鎉ׅ׷
    ‣ TDSJQU銲稆זוח״׷،فٗ٦ثָ♶銲חז׏׋
    ‣ +BWB4DSJQU♳ד⢪ֲחכ♶⤑׌ָ˘
    ‣ 1PMZNFS-BCTMJUIUNMד5FNQMBUF-JUFSBMַ׵⢪ִ׷
    ‣ 5FNQMBUFQBSUT"1*ָ勻׷ַ׮׃׸זְ
    

    View Slide

20. UFNQMBUF銲稆׾⢪ֲ
    ꬊ崞䚍ז)5.-׾⿫撑ׅ׷
    
    This is an image
    
    
    document
    .querySelector('template').content;
    

    View Slide

21. &4.PEVMFT
    ‣ 㢩鿇+BWB4DSJQUؿ؋؎ٕ׾ٗ٦سׅ׷
    ‣ +BWB4DSJQUך俑岀ד꫼涸ח鍑寸ׅ׷
    ‣ TDSJQUUZQFˑNPEVMF˒PSTDSJQUOPNPEVMF
    ‣ 剑鵚כ%ZOBNJD*NQPSUהְֲ➬圫׮֮׷
    ‣ JNQPSU
    ًاحسד⹛涸חٗ٦سׅ׷
    ‣ )5.-*NQPSUTךֿהכ䘌׸״ֲ
    ‣ )5.-.PEVMFTָ勻׷ַ׮׃׸זְ
    

    View Slide

22. ٌآُ٦ٕ׾FYQPSUׅ׷
    ꫼涸חJNQPSUׅ׷
    export default
    class FancyButton {
    ...
    }
    import FancyButton
    from './fancy-button.js';
    import('./fancy-button.js')
    .then(FancyButton => FancyButton);
    ⹛涸חJNQPSUׅ׷
    

    View Slide

23. 
    ✅
    ✅
    $VTUPN&MFNFOUTW
    4IBEPX%0.W
    5FNQMBUFT
    &4.PEVMFT ✅ ✅
    ✅ ✅
    ✅ ✅
    ✅ ✅
    
    ✅
    ✅
    
    
    ـٓؐؠ؟ه٦ز䎃ⱴ
    

    View Slide

24. 8FC$PNQPOFOUT
    ׾⢪ֲ䩛갫銲秈
    

    View Slide

25. ΍㹀纏ׅ׷
    ؕأةي銲稆׾&4ךؙٓأ
    圓俑ד㹀纏׃ծؿ؋؎ٕחׅ׷
    ꧵䕎׾UFNQMBUF銲稆ַ
    +BWB4DSJQUך俑㶵⴨ד⡲׷
    BUUBDIFE$BMMCBDLד
    TIBEPX3PPU׾欰װׅ
    ꧵䕎׾؝ؾ٦׃ծTIBEPX3PPUח
    㙵׭鴥׬
    Ύ⢪ֲ
    ؝ٝه٦طٝز׾㹀纏ׅ׷
    +BWB4DSJQUؿ؋؎ٕ׾&4
    .PEVMFTד؎ٝه٦زׅ׷
    ؎ٝه٦ز׃׋ؙٓأ׾ծ
    DVTUPN&MFNFOUTEFOF
    דؕأ
    ةي銲稆ה׃ג㹀纏ׅ׷
    㹀纏׃׋ؕأةي銲稆׾)5.-
    ה׃ג⢪ֲ
    

    View Slide

26. ΍㹀纏ׅ׷
    class FancyButton extends HTMLElement {
    connectedCallback() {
    this.attachShadow({
    mode: 'open'
    }).innerHTML = `
    button { … }
    
    `;
    }
    }
    export default FancyButton;
    

    View Slide

27. Ύ⢪ֲ
    
    fancy button
    
    <br/>import FancyButton<br/>from './fancy-button.js';<br/>customElements<br/>.define('fancy-button', FancyButton);<br/>
    

    View Slide

28. 8FC$PNQPOFOUTTBOECPY
    IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY
    

    View Slide

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

    View Slide