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. 1PMZNFS+BQBO.FFUVQ

    4IPHP4FOTVJBLB!DI
    8FC$PNQPOFOUT
    3F*OUSPEVDUJPO
    1IPUPCZ4BSBI$SVUDIFMEPO6OTQMBTI

    View full-size slide

  2. ௒଎
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  8. fancy button

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

    View full-size slide


  9. fancy button

    ֿ׸ַ׵ךװ׶倯

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. class FancyButton extends HTMLElement {
    connectedCallback() {
    this.attachShadow({
    mode: 'open'
    }).innerHTML = `
    button { … }

    `;
    }
    }
    customElements
    .define('fancy-button', FancyButton);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. UFNQMBUF銲稆׾⢪ֲ
    ꬊ崞䚍ז)5.-׾⿫撑ׅ׷

    This is an image


    document
    .querySelector('template').content;

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  21. $VTUPN&MFNFOUTW
    4IBEPX%0.W
    5FNQMBUFT
    &4.PEVMFT ✅ ✅
    ✅ ✅
    ✅ ✅
    ✅ ✅





    ـٓؐؠ؟ه٦ز䎃ⱴ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    `;
    }
    }
    export default FancyButton;

    View full-size slide

  25. Ύ⢪ֲ

    fancy button

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

    View full-size slide

  26. 8FC$PNQPOFOUTTBOECPY
    IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

    View full-size slide

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

    View full-size slide