Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Meguro.esのWeb Components(勝手に) 作ってみた #meguroes
Search
tiwu
April 04, 2019
Technology
0
200
Meguro.esの Web Components(勝手に) 作ってみた #meguroes
Meguro.esのWeb Components(勝手に) 作ってみた #meguroes
tiwu
April 04, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
670
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.3k
App Shortcuts
tiwu_dev
0
880
Web Vitals
tiwu_dev
0
71
Web Share API
tiwu_dev
0
1.3k
Badge in Background
tiwu_dev
0
66
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.4k
Other Decks in Technology
See All in Technology
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
530
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
shake-upを科学する
rsakata
7
1k
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Navigating Team Friction
lara
187
15k
Music & Morning Musume
bryan
46
6.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimizing for Happiness
mojombo
379
70k
Scaling GitHub
holman
460
140k
KATA
mclloyd
30
14k
Speed Design
sergeychernyshev
32
1k
Balancing Empowerment & Direction
lara
1
450
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Meguro.esの Web Components(勝手に) 作ってみた Wataru Taguchi
アジェンダ • 自己紹介 • 作ったぞい • まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
みなさん!
Meguro.esが好きですか!
Meguro.esのロゴを 自分のサイトに 表示させたいですよね!
Meguro.esのイベント情報 を自分のサイトに 表示させたいですよね!
それWeb Components でできるよ
<meguro-es-logo> <meguro-es-connpass-list>
https://informal-meguro-es-we b-components.netlify.com/
使い方
<script type="module" src="./src/js/meguroEsConnpassList.js"> </script>
<meguro-es-connpass-list> </meguro-es-connpass-list>
かんたん!!!!
https://github.com/tiwuofficial/i nformal-meguro-es-web-comp onents
Web Components? • カスタム要素 • Shadow DOM • HTML テンプレート
カスタム要素
Shadow DOM
• constructorとconnectedCallbackの違いに気づく のが遅かった • conpassのAPIがJSONPだった つらみ
Web Componentsは いいぞ