Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Meguro.esのWeb Components（勝手に） 作ってみた #meguroes

Transcript

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