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

Web Componentsが破った約束とは(Update) / What is the br...

tipo159
November 18, 2017

Web Componentsが破った約束とは(Update) / What is the broken promise of Web Components(Update)

lit-htmlの情報を追加

"Regarding the broken promise of Web Components"の内容とWeb Componentsライブラリの紹介
秋のJavaScript祭 in mixi 2017のLT

tipo159

November 18, 2017
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

  1. ൃද಺༰ • ”Regarding the broken promise of Web Components”ͷ೔ຊޠͷ هࣄ͕ݟ͔ͭΒͳ͔ͬͨͷͰࠓճ঺հ

    • ”The broken promise of Web Components”ʹର͢Δճ౴ʁ • @sizuhiko͞Μʹڭ͍͍͑ͯͨͩͨlit-htmlͷ৘ใΛ൓ө • ͨͩ͠ɼlit-html͸0.6.0ͳͷͰ੡඼։ൃʹ͸·ͩ࢖͑ͳ͍ • https://dmitriid.com/blog/2017/03/the-broken-promise-of-web- components/ • http://robdodson.me/regarding-the-broken-promise-of-web- components/ • https://github.com/PolymerLabs/lit-html 2
  2. lit-htmlͷྫ import {html, render} from 'lit-html'; // lit-htmlΛฦ͢lit-htmlؔ਺ const helloTemplate

    = (name) => html`<div>Hello ${name}!</div>`; // ͜ͷؔ਺ͷ໭Γ஋Λrender()ʹ౉ͯ͠HTMLΛඳը // <div>Hello Steve!</div>ΛυΩϡϝϯτϘσΟʹඳը render(helloTemplate('Steve'), document.body); // <div>Hello Kevin!</div>ʹߋ৽, ͨͩ͠${name}ͷΈߋ৽ render(helloTemplate('Kevin'), document.body); 5
  3. Web ComponentϥΠϒϥϦ 8 ໊শ ֓ཁ αϙʔτاۀ 1PMZNFS w 0OFXBZͱ5XPXBZͷσʔλόΠϯσ ΟϯάΛఏڙ

    w ֤छ1PMZpMMΛఏڙ (PPHMF 4LBUFKT w ؔ਺ܕͰޮ཰ͷΑ͍8FC$PNQPOFOU Λ࡞੒͢ΔͨΊͷϥΠϒϥϦ w 3FBDU౳ͷଞϑϨʔϜϫʔΫͱγʔϜ Ϩεʹಈ࡞ 95BH w 8FC$PNQPOFOUඪ४"1*ͷϥούʔ ϥΠϒϥϦ .JDSPTPGU 4MJNKT w 8FC$PNQPOFOUʹ֦ுΠϯλϑΣʔ εΛఏڙ͢ΔܰྔϥΠϒϥϦ w σʔλόΠϯσΟϯά͸&4ͷܧ ঝͰఏڙ