Slide 1
Slide 1 text
Meguro.esの
Web Components（勝手に）
作ってみた
Wataru Taguchi
Slide 2
Slide 2 text
アジェンダ
● 自己紹介
● 作ったぞい
● まとめ
Slide 3
Slide 3 text
自己紹介
# Wataru Taguchi
- GameWith Front End Engineer
- PWAとかパフォーマンスチューニングが好き
- @tiwu_official
- FF14, Beer, Kyoto Animation
Slide 4
Slide 4 text
みなさん！
Slide 5
Slide 5 text
Meguro.esが好きですか！
Slide 6
Slide 6 text
Meguro.esのロゴを
自分のサイトに
表示させたいですよね！
Slide 7
Slide 7 text
Meguro.esのイベント情報
を自分のサイトに
表示させたいですよね！
Slide 8
Slide 8 text
それWeb Components
でできるよ
Slide 9
Slide 9 text
Slide 10
Slide 10 text
https://informal-meguro-es-we
b-components.netlify.com/
Slide 11
Slide 11 text
使い方
Slide 12
Slide 12 text
Slide 13
Slide 13 text
Slide 14
Slide 14 text
かんたん！！！！
Slide 15
Slide 15 text
https://github.com/tiwuofficial/i
nformal-meguro-es-web-comp
onents
Slide 16
Slide 16 text
Web Components?
● カスタム要素
● Shadow DOM
● HTML テンプレート
Slide 17
Slide 17 text
カスタム要素
Slide 18
Slide 18 text
Shadow DOM
Slide 19
Slide 19 text
● constructorとconnectedCallbackの違いに気づく
のが遅かった
● conpassのAPIがJSONPだった
つらみ
Slide 20
Slide 20 text
Web Componentsは
いいぞ