Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of Web Components

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
September 24, 2017
Technology
9
7.8k

The State of Web Components

2017年9月24日に開催された HTML5 Conference 2017 の「The State of Web Components」のセッション資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

September 24, 2017
Tweet

More Decks by Shogo Sensui

See All by Shogo Sensui
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
1
410
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
0
390
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
0
400
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
0
350
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
1
7.3k
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
11
2.9k
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
0
19
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
3
780
0d605a3350dd7e91b8136aecffd5ceeb?s=48 1000ch
8
7k

Other Decks in Technology

See All in Technology
44b799f91cc48e38c5fe9f5d9c5ecc61?s=48 takaichi00
0
600
3373c144fef1d3518b9b3f24a6b46ad0?s=48 lmi
1
510
2b0404a5db1a74f01bf3bf94d142e28c?s=48 alexzhukovich
0
100
97b3cca999b52cb5296675ac0a5c12cd?s=48 emiki
1
130
7e20183342a040a32924a41343603286?s=48 konabuta
1
350
Ede1bb0ec880bd573d52f8f351ff827a?s=48 yoshiya
0
250
5c4f5cafb8aa4f6258e5112412b3ab15?s=48 chisaki0120
0
110
2219597a939c895e5db6f8b7c94e2859?s=48 pojiro
1
100
C422cc033079e005fd1aa1b845b099da?s=48 meow_noisy
2
410
8ca67ac59d908cf23431095fc2cacb09?s=48 sada913
0
190
9c551bfc52665c832b89e2748e33cf60?s=48 hitomi___kt
1
240
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
1
260

Featured

See All Featured
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
161
6.7k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
22
1k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
29
1.5k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.6k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
170
7.5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
496
110k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
254
19k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
61
6.6k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k

Transcript

  1. )5.-$POGFSFODF  4IPHP4FOTVJBLB!DI 5IF4UBUFPG8FC$PNQPOFOUT

  2. !DI

  3. ‣ 4IPHP4FOTVJ ‣ ؎ٝة٦طحزדכDIדׅ ‣ $ZCFS"HFOU *OD ‣ 8FC*OJUJBUJWF$FOUFS ‣

    4PGUXBSF&OHJOFFS ‣ 8FC䪮遭Ⰻ菙ָ㥨ֹדׅ ‣ 044崞⹛׮׃גתׅ

  4. 馄鸞劤ָ⳿תׅ 涪㡰✮㹀

  5. 8IZ8FC$PNQPOFOUT

  6. )5.- $44 8FCꟚ涪罏

  7. 8FCחֶֽ׷鿇ㅷךꨇ׃ׁ ‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ ‣ 铣׫鴥׿׌$44ך䕦갟眔㔲ָ鎘׶濼׸זְ ‣ せ⵸瑞꟦ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ׷䗳銲ָ֮׷ ‣ ⡲׏׋鿇ㅷ׾ⱄⵃ欽׃חְֻ ‣

    )5.- $44 +BWB4DSJQU׾תה׭׷➬穈׫ָזְ ‣ תה׭׋鿇ㅷ׾ꂁ䋒ׅ׷ؒ؝ءأذيָזַ׏׋

  8. نةٝ׾⡲׷חכ˘ GBODZCVUUPO

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

    padding: 1em; border-radius: 0.5em; border: none; } )5.-ה$44׾剅ֽל0,

  10. GBODZCVUUPO

  11. GBODZCVUUPO GBODZCVUUPO

  12. <button class="a"> fancy button </button> <button class="b"> fancy button </button>

    button { color: white; padding: 1em; border-radius: 0.5em; border: none; } button.a { background: #0086b3; } button.b { background: #008080; }

  13. GBODZCVUUPO GBODZCVUUPO

  14. GBODZCVUUPO GBODZCVUUPO GBODZCVUUPO

  15. GBODZCVUUPO GBODZCVUUPO GBODZCVUUPO PWBM TRVBSF

  16. fancy button </button> <button class="b"> fancy button </button> <button class="c">

    fancy button </button> <button class="oval"> oval </button> <button class="square"> border-radius: 0.5em; border: none; } button.a { background: #0086b3; } button.b { background: #008080; } button.oval { ... }

  17. GBODZCVUUPO GBODZCVUUPO GBODZCVUUPO PWBM TRVBSF

  18. <fancy-button color="a"> fancy button </fancy-button> <fancy-button color="b"> fancy button </fancy-button>

    <fancy-button color="c"> fancy button </fancy-button> <oval-button>oval</oval-button> <square-button>square</square-button>

  19. 4IBEPX%0. $VTUPN&MFNFOUT 5FNQMBUFT )5.-*NQPSUT ˟׍׳׏ה⵸תד

  20. ˟䎃猧植㖈 4IBEPX%0. $VTUPN&MFNFOUT 5FNQMBUFT &4.PEVMFT

  21. 4IBEPX%0.

  22. 4IBEPX%0.הכ ‣ )5.-ծ$44ծ+BWB4DSJQUך䕦갟眔㔲׾ꣲ㹀ׅ׷ ‣ مأزהז׷銲稆חTIBEPX3PPU׾欰װ׃ծ׉ך⚥ד饯ֿ׷ֿה׾4IBEPX %0.ⰻח殅׭׷ ‣ 4IBEPX%0.㢩鿇ַ׵ך䕦갟׾ꣲ㹀ׅ׷ ‣ TIBEPX3PPUפך،ؙإأ׾ꣲ㹀涸ח׃ծ䮶׷莸ְ׾䬐⥂ׅ׷

    ‣ TIBEPX3PPUפ،ؙإأדֹ׷PQFOٌ٦سהծ黪倖ׅ׷DMPTFEٌ٦سָ֮׷

  23. const button = document.querySelector('button'); const shadowRoot = button.attachShadow({ mode: 'open'

    // or 'close' }); // readonly property console.log(button.shadowRoot); 4IBEPX%0.ך欰װ׃倯

  24. GBODZCVUUPO ⢽ִלְֲֲֿنةٝ

  25. <button> fancy button </button> ֲֿ剅ֽ׋׵ءٝفٕ˘ <style> button { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; }ɹ </style>

  26. <button> #shadow-root fancy button </button> <style> button { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; } </style> <button> <slot></slot> </button>

  27. <button> #shadow-root fancy button </button> <style> button { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; }ɹ </style> <button> <slot></slot> </button>

  28. <button> #shadow-root fancy button </button> <style> button { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; } </style> <button> <slot></slot> </button> 4DPQFE

  29. $VTUPN&MFNFOUT

  30. $VTUPN&MFNFOUTהכ ‣ 杝荈ך)5.-銲稆׾㹑鎉ׅ׷ ‣ )5.-ד㹑鎉涸חⵃ欽דֹ׷ ‣ %0."1*׾鸐ׄגㄏ⟀涸חⵃ欽דֹ׷ ‣ ⟣䠐ך䮶׷莸ְ׾㹀纏ׅ׷ ‣

    㹀纏ׁ׸׋ٓ؎ؿ؟؎ؙٕ׾ؿحؙׅ׷

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

    { ... } disconnectedCallback() { ... } attributeChangedCallback() { ... } adoptedCallback() { ... } } ؕأةي銲稆ٓ؎ؿ؟؎ؙٕ

  32. 䖞勻ך8FC鿇ㅷךⱄⵃ欽 ‣ 鿇ㅷ׾圓䧭ׅ׷)5.-׾鎸鶢ׅ׷ ‣ $44ח״׷أة؎ؚٔٝ׾黝欽ׅ׷ ‣ $44ؿ؋؎ٕ׾ٗ٦سׅ׷ծTUZMF銲稆׾剅ֻծFUD ‣ +BWB4DSJQUח״׷䮶׷莸ְ׾黝欽ׅ׷ ‣

    +BWB4DSJQUؿ؋؎ٕ׾ٗ٦سׅ׷ծTDSJQU銲稆׾剅ֻծFUD

  33. GBODZCVUUPO نةٝ׾⢪ְ׋ְ˘

  34. .fancy { background: #0086b3; color: white; padding: 1em; border-radius: 0.5em;

    border: none; } CVUUPODTT

  35. CVUUPOKT document .querySelector('.fancy') .addEventListener('click', () => { //... });

  36. <button class="fancy"> fancy button </button> JOEFYIUNM

  37. <link rel="stylesheet" href="button.css"> ... <button class="fancy"> fancy button </button> ...

    <script src="button.js"></script> 穈׫さ׻ׇג⢪ֲ
  38. None

  39. class FancyButton extends HTMLElement { connectedCallback() { this.innerHTML = `

    <style>button { … }</style> <button>fancy button</button> `; } } customElements .define('fancy-button', FancyButton);

  40. <fancy-button> fancy button </fancy-button> GBODZCVUUPO GBODZCVUUPO׾⢪ִ׷

  41. <fancy-button> <style> button { background: #0086b3; color: white; padding: 1em;

    border-radius: 0.5em; border: none; } </style> <button> fancy button </button> </fancy-button> /PUTDPQFE

  42. 4IBEPX%0.  $VTUPN&MFNFOUT

  43. class FancyButton extends HTMLElement { connectedCallback() { this.innerHTML = `

    <style>button { … }</style> <button>fancy button</button> `; } } customElements .define('fancy-button', FancyButton);

  44. class FancyButton extends HTMLElement { connectedCallback() { this.shadowRoot.innerHTML = `

    <style>button { … }</style> <button><slot></slot></button> `; } } customElements .define('fancy-button', FancyButton);

  45. <fancy-button> <style> button { background: #0086b3; color: white; padding: 1em;

    border-radius: 0.5em; border: none; } </style> <button> fancy button </button> </fancy-button>

  46. <fancy-button> #shadow-root <style> button { background: #0086b3; color: white; padding:

    1em; border-radius: 0.5em; border: none; } </style> <button> <slot></slot> </button> fancy button </fancy-button> 4DPQFE

  47. 5FNQMBUFT

  48. 5FNQMBUFTהכ ‣ ꬊ崞䚍ז)5.-銲稆׾㹑鎉ׅ׷ ‣ ذٝفٖ٦زה׃ג)5.-銲稆׾䪔ִ׷ ‣ 䖞勻ךعحؙ涸ז،فٗ٦ث׾ׇ׆ח幥׬

  49. <div style="display:none;"> <p>This is an image</p> <img src="foo.jpg" alt=""> </div>

    4FOEBSFRVFTU

  50. <script type="text/template"> <p>This is an image</p> <img src="foo.jpg" alt=""> </script>

    &WBMXJUIJOOFS)5.-

  51. <template> <p>This is an image</p> <img src="foo.jpg" alt=""> </template> *OFSU✨

  52. 4IBEPX%0.  $VTUPN&MFNFOUT  5FNQMBUFT

  53. class FancyButton extends HTMLElement { connectedCallback() { this.shadowRoot.innerHTML = `

    <style>button { … }</style> <button><slot></slot></button> `; } } customElements .define('fancy-button', FancyButton);

  54. <template> <style>button { … }</style> <button><slot></slot></button> </template> <script> class FancyButton

    extends HTMLElement { // ... } customElements .define('fancy-button', FancyButton); </script>

  55. <link rel="import" href="fancy-button.html"> <fancy-button> fancy button </fancy-button>

  56. )5.-*NQPSUT… IUUQTHJUIVCDPNXDXFCDPNQPOFOUTJTTVFTJTTVFDPNNFOU

  57. )5.-.PEVMFT… IUUQTHJTUHJUIVCDPN5BLBZPTIJ,PDIJGEDFEGECCEBGFGF

  58. import fancy from './fancy.html' as HTMLTemplateElement; export class FancyButton extends

    HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }).appendChild(fancy.content.cloneNode(true)); } }

  59. &4.PEVMFT

  60. &4.PEVMFTהכ ‣ &4.PEVMFTךـٓؐؠ㹋鄲 ‣ TDSJQUUZQFˑNPEVMF˒ד+BWB4DSJQUؿ؋؎ٕ׾ٗ٦سׅ׷ ‣ TDSJQUOPNPEVMFדꬊ㼎䘔橆㞮׾罋䣁ׅ׷ ‣ &4.PEVMFTך/PEFKT㹋鄲 ‣

    NKT׾&4.PEVMFTך+BWB4DSJQUؿ؋؎ٕה׃גٗ٦سׅ׷

  61. export default class FancyButton { ... } GBODZCVUUPOKT

  62. import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes

    from 'prop-types'; import FancyButton from './fancy-button.js'; JOEFYKT

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

  64. 4IBEPX%0.  $VTUPN&MFNFOUT  &4.PEVMFT

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

    }).innerHTML = ` <style>button { … }</style> <button><slot></slot></button> `; } } customElements .define('fancy-button', FancyButton);

  66. export default class FancyButton extends HTMLElement { connectedCallback() { this.attachShadow({

    mode: 'open' }).innerHTML = ` <style>button { … }</style> <button><slot></slot></button> `; } }

  67. <fancy-button> fancy button </fancy-button> <script type="module"> import FancyButton from './fancy-button.js';

    customElements .define('fancy-button', FancyButton); </script>

  68. 8FCחֶֽ׷鿇ㅷךꨇ׃ׁ ‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ ‣ 铣׫鴥׿׌$44ך䕦갟眔㔲ָ鎘׶濼׸זְ ‣ せ⵸瑞꟦ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ׷䗳銲ָ֮׷ ‣ ⡲׏׋鿇ㅷ׾ⱄⵃ欽׃חְֻ ‣

    )5.- $44 +BWB4DSJQU׾תה׭׷➬穈׫ָזְ ‣ תה׭׋鿇ㅷ׾ꂁ䋒ׅ׷ؒ؝ءأذيָזַ׏׋

  69. 4IBEPX%0. $VTUPN&MFNFOUT &4.PEVMFT OQN ZBSO 8FCחֶֽ׷鿇ㅷךꨇ׃ׁ ‣ )5.-ה$44חأ؝٦فָ㶷㖈׃זְ ‣ 铣׫鴥׿׌$44ך䕦갟眔㔲ָ鎘׶濼׸זְ

    ‣ せ⵸瑞꟦ָ遼瑱׃זְ״ֲծ䌢ח䠐陎ׅ׷䗳銲ָ֮׷ ‣ ⡲׏׋鿇ㅷ׾ⱄⵃ欽׃חְֻ ‣ )5.- $44 +BWB4DSJQU׾תה׭׷➬穈׫ָזְ ‣ תה׭׋鿇ㅷ׾ꂁ䋒ׅ׷ؒ؝ءأذيָזַ׏׋

  70. 1PMZNFS4VNNJU JO$PQFOIBHFO

  71. #PXFSJTEFQSFDBUFE

  72. 6TFOQN ZBSO

  73. // fancy-button v1.0.0 customElements .define('fancy-button', FancyButton); // fancy-button v1.1.0 customElements

    .define('fancy-button', FancyButton); ZBSO׾⢪ֲץֹ椚歋 ☠ ⣛㶷ٌآُ٦ٕ׾ؿٓحزזخٔ٦ד鍑寸דֹ׷✨

  74. ‣ #SPXTFS4VQQPSU ‣ "DDFTTJCJMJUZ ‣ -PBE1FSGPSNBODF ‣ 3FOEFS1FSGPSNBODF

  75. 8FC$PNQPOFOUTTBOECPY IUUQTDIHJUIVCJPXFCDPNQPOFOUTTBOECPY

  76. ‣ #SPXTFS4VQQPSU ‣ "DDFTTJCJMJUZ ‣ -PBE1FSGPSNBODF ‣ 3FOEFS1FSGPSNBODF

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

    ✅ ✅ ✅ ✅ ✅ ✅ 䎃猧ـٓؐؠ؟ه٦ز

  78. 8FC$PNQPOFOUT JT BWBJMBCMFOPX PO UIFNPCJMFXFC✨

  79. None

  80. :PV5VCFJTCVJMU POUIFUPQPG1PMZNFS

  81. None

  82. 6TFXFCDPNQPOFOUTKT ‣ $VTUPN&MFNFOUTWךهٔؿ؍ٕ ‣ 4IBEZ%0.4IBEPX%0.ך%0."1*هٔؿ؍ٕ ‣ 4IBEZ$444IBEPX%0.ךأة؎ٕꟼ鸬هٔؿ؍ٕ ‣ )5.-*NQPSUT

  83. 8IZ4IBEZ%0.  ‣ %0.خٔ٦ך،ؙإ؟׾ⵖ䖴ׅ׷ךָꨇ׃ְ ‣ ぐ珏%0."1*װ/PEF-JTUךؒىُٖ٦زָꨇ׃ְ ‣ EPDVNFOUCPEZ瘝ך،ؙإ؟׾♳剅ֹדֹזְ ‣ ؝٦سꆀָ花㣐חז׷♳ծػؿؓ٦وٝأח׮䕦갟ׅ׷

    ‣ 4IBEZ%0."1*׾➜׃ג،ؙإأׇׁ׷ ‣ 㸜㹀䚍׾⥂׍אאծػؿؓ٦وٝأ׾⳿ׅ
  84. None

  85. 8FC$PNQPOFOUT JTBMTP BWBJMBCMFOPX PO UIFEFTLUPQXFC

  86. ‣ #SPXTFS4VQQPSU ‣ "DDFTTJCJMJUZ ‣ -PBE1FSGPSNBODF ‣ 3FOEFS1FSGPSNBODF

  87. "DDFTTJCJMJUZ ‣ 4IBEPX%0.ך)5.-׾،ؙإءـٕח ‣ 鸐䌢ך%0.ず圫חծإوٝذ؍ؙأ׾䠐陎ׅ׷ ‣ )5.-׌ֽד♶⼧ⴓז㜥さכծ8"*"3*"ד؟ه٦زׅ׷ ‣ 孡חז׷ךכأ؝٦فⰻפך،ؙإأ ‣

    4IBEPX%0.ָꪪ⳿ׁ׸גְ׷׌ֽ ‣ ،ؙإءؽٔذ؍ָ⡚ְ؝ٝه٦طٝز׾⢪ֲ㜥さכ˘

  88. <fancy-button> #shadow-root fancy button </fancy-button> <style> button { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; } </style> <button> <slot></slot> </button> &YQPTFE

  89. <fancy-button> #shadow-root fancy button </fancy-button> <style> div { background: #0086b3;

    color: white; padding: 1em; border-radius: 0.5em; border: none; } </style> <div role="button" tabindex="0"> <slot></slot> </div> &YQPTFE

  90. ‣ #SPXTFS4VQQPSU ‣ "DDFTTJCJMJUZ ‣ -PBE1FSGPSNBODF ‣ 3FOEFS1FSGPSNBODF

  91. -PBE1FSGPSNBODF ‣ TDSJQUח״׷؝ٝه٦طٝزךٗ٦س ‣ ؙٔؒأز侧כ)551ד֮׸ל孡ח׃ֺׅזֻג葺ְ ‣ ؝ٝه٦طٝزך+BWB4DSJQUؿ؋؎ٕכNJOJGZׅ׷ ‣ UZQFˑNPEVMF˒㾩䚍ח״׷EFGFSٗ٦س ‣

    ؔفءّٝדBTZOD㾩䚍׾➰♷דֹ׷

  92. TDSJQUח״׷ぐ珏ٗ٦س IUUQTIUNMTQFDXIBUXHPSHNVMUJQBHFTDSJQUJOHIUNMUIFTDSJQUFMFNFOU

  93. ثُ٦صؚٝه؎ٝز ‣ ٔا٦أ׾㙵׭鴥׬ךַٍؗحءُׅ׷ךַ ‣ 㙵׭鴥׫כ剑׮傍ֻٖٝتׁؚٔٝ׸׉ֲ׌ָծⴱ劍ٗ٦سָ曯暨חז׷ ‣ ׉׸״׶כ$BDIF$POUSPMقحتװ4FSWJDF8PSLFSזודٍؗحءُ׃׋ְ ‣ ⴱ劍ٗ٦س׾傍׭׋ְ ‣

    MJOLSFMˑQSFMPBE˒ד"5'חꟼ׻׷ٔا٦أ׾ٗ٦س׃גֶֻ ‣ 如㔐鼂獳ח䗳銲זٔا٦أכMJOLSFMˑQSFGFUDI˒דٗ٦س׃גֶֻ

  94. ‣ #SPXTFS4VQQPSU ‣ "DDFTTJCJMJUZ ‣ -PBE1FSGPSNBODF ‣ 3FOEFS1FSGPSNBODF

  95. 3FOEFS1FSGPSNBODF ‣ -JHIU%0.ה4IBEPX%0.ך䊴 ‣ 4IBEPX%0.׉ך׮ךךכـٓؐؠ㹋鄲ך剑黝⻉ח㨻י״ֲ ‣ ׋ע׿㣐䊴כזְ⦐➂ך✮䟝דׅ ‣ 7JSUVBM%0.ח״׷䊴ⴓ䲽歗ך⡭㖑 ‣

    ➙תד鸐׶3FBDUזוך7JFXٓ؎ـٓٔה穈׫さ׻ׇ׷ ‣ 8FC$PNQPOFOUTⰻד䊴ⴓ䲽歗׾㹋倵ׅ׷

  96. import React from 'react'; export default class Button extends React.Component

    { handleClick(e) { if (this.props.onClick) { this.props.onClick(e); } } render() { const handleClick = this.handleClick.bind(this); return ( <fancy-button onClick={handleClick}> {this.props.children} </fancy-button> ); } }

  97. 1PMZNFS-BCTMJUIUNM ‣ 5BHHFE5FNQMBUF-JUFSBMדUFNQMBUF׾⢪ֲ➬穈׫ ‣ IUNMAAדذٝفٖ٦ز׾⡲׶ծSFOEFS ד)5.-׾欰䧭ׅ׷ ‣ SFOEFS ד床ׅ⹛涸ז鿇ⴓך׫׾䊴ⴓ䲽歗ׅ׷

  98. const helloTemplate = (name) => html`<div>Hello ${name}!</div>`; // renders <div>Hello

    Steve!</div> to the document body render(helloTemplate('Steve'), document.body); // updates to <div>Hello Kevin!</div>, but only updates the ${name} part render(helloTemplate('Kevin'), document.body);

  99. import { html, render } from './lit-html.js'; export default class

    IconButton extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); render(this.template, this.shadowRoot); } get template() { return html` <style>...</style> <button> <i class="${this.getAttribute('icon')}"></i> <slot></slot> </button> `; } };

  100. תה׭ ‣ 8FC$PNQPOFOUTחꟼׅ׷ぐ珏➬圫ָ㸜㹀׃גֹ׋ ‣ ـٓؐؠ㹋鄲׮滠㹋ח鹌׫ծ暴חٌغ؎ٕ8FCדכه ٔؿ؍ٕז׃ד⢪ִ׷ ‣ ➙⢪׏גְ׷䪮遭أةحؙח׮《׶鴥׿דְֽ׷ ‣ ـٓؐؠⰻ鿇Ⳣ椚ך剑黝⻉׮䖉׍אאծطحزٙ٦ؙ

    ꟼ鸬כ㛇劤ח屟׏׋ثُ٦صؚٝד0,

  101. :PVBSFSFBEZUPVTF 8FC$PNQPOFOUT✨

  102. 5IBOLZPV !DI "DI