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

!DI

௒଎ 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

GBODZCVUUPO

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

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

This is an image

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 = ` button { … } `; } } export default FancyButton;

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

8FC$PNQPOFOUTTBOECPY IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

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