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

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

tiwu
April 04, 2019
Technology
0
180

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

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

tiwu

April 04, 2019
Tweet

More Decks by tiwu

See All by tiwu
Eleventy で SSG
tiwu_dev
2
650
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.2k
App Shortcuts
tiwu_dev
0
840
Web Vitals
tiwu_dev
0
63
Web Share API
tiwu_dev
0
1.2k
Badge in Background
tiwu_dev
0
52
PWAとCache API #frontkansai
tiwu_dev
5
2k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.3k

Other Decks in Technology

See All in Technology
사이드 프로젝트를 20번 실패한 주니어의 오답노트 훔쳐보기(feat. KMP)
yjyoon
0
560
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
0
150
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
0
570
ソフトウェア開発におけるインターフェイスという考え方 / PHPerKaigi 2025
k1low
5
710
これからクラウドエンジニアになるために本当に必要なスキル 5選
hiyanger
1
370
組織のスケールを見据えたプロジェクトリードエンジニア制度の実践 / Project Lead Engineer for Scaling Engineering Organization
ohbarye
13
2.7k
UDDのすすめ
maguroalternative
0
590
TechBullエンジニアコミュニティの取り組みについて
rvirus0817
0
560
OPENLOGI Company Profile for engineer
hr01
1
21k
英語と日本語の文字をComposeでキレイに並べよう
tomoya_shibata
1
130
EC-CUBEはサーバレスで動かせるのか？
yukishimada
1
140
DIってなんだか難しい？ 依存という概念を「使う・使われる」 という言葉で整理しよう
akinoriakatsuka
0
590

Featured

See All Featured
Done Done
chrislema
182
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
290
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
We Have a Design System, Now What?
morganepeng
51
7.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How GitHub (no longer) Works
holman
314
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Ace a Technical Interview
jacobian
276
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k

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は いいぞ