Web Components Re-Introduction

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

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

8FC$PNQPOFOUT הכז׿׊

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

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

8FC"VEJP$POUSPM-JWF%FNP IUUQBHFLUNSHJUIVCJPXFCBVEJPDPOUSPMTTBNQMFIUNM

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

GBODZCVUUPO

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

<fancy-button> fancy button </fancy-button> ֿ׸ַ׵ךװ׶倯

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

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

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

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

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

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

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

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

UFNQMBUF銲稆׾⢪ֲ ꬊ崞䚍ז)5.-׾⿫撑ׅ׷ <template> <p>This is an image</p> <img src="foo.jpg" alt="">
</template> document .querySelector('template').content;

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

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

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

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

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

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

Ύ⢪ֲ <fancy-button> fancy button </fancy-button> <script type="module"> import FancyButton from
'./fancy-button.js'; customElements .define('fancy-button', FancyButton); </script>

8FC$PNQPOFOUTTBOECPY IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

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

Web Components Re-Introduction

Web Components Re-Introduction

Shogo Sensui

More Decks by Shogo Sensui

Other Decks in Technology

Featured

Transcript

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

!DI

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

8FC$PNQPOFOUT הכז׿׊

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

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

8FC"VEJP$POUSPM-JWF%FNP IUUQBHFLUNSHJUIVCJPXFCBVEJPDPOUSPMTTBNQMFIUNM

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

GBODZCVUUPO

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

<fancy-button> fancy button </fancy-button> ֿ׸ַ׵ךװ׶倯

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

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

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

$VTUPN&MFNFOUT ‣ 倜׃ְ)5.-銲稆׾㹀纏ׅ׷ ‣ ؕأةي銲稆ךせ⵸חכع؎ؿٝ׾ろ׭׷ ‣ JT㾩䚍ח״׷)5.-銲稆ך䭁䓸כQFOEJOH⚥ ‣ 銲稆ךٓ؎ؿ؟؎ؙٕ ‣

class FancyButton extends HTMLElement { constructor() { ... } connectedCallback()

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

const doc = document; const btn = doc.querySelector('button'); const shadowRoot

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

UFNQMBUF銲稆׾⢪ֲ ꬊ崞䚍ז)5.-׾⿫撑ׅ׷ <template> <p>This is an image</p> <img src="foo.jpg" alt="">

&4.PEVMFT ‣ 㢩鿇+BWB4DSJQUؿ؋؎ٕ׾ٗ٦سׅ׷ ‣ +BWB4DSJQUך俑岀ד꫼涸ח鍑寸ׅ׷ ‣ TDSJQUUZQFˑNPEVMF˒PSTDSJQUOPNPEVMF ‣ 剑鵚כ%ZOBNJD*NQPSUהְֲ➬圫׮֮׷ ‣

ٌآُ٦ٕ׾FYQPSUׅ׷ ꫼涸חJNQPSUׅ׷ export default class FancyButton { ... } import

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

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

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

΍㹀纏ׅ׷ class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode:

Ύ⢪ֲ <fancy-button> fancy button </fancy-button> <script type="module"> import FancyButton from

8FC$PNQPOFOUTTBOECPY IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

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