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
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
200
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.9k
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Building Applications with DynamoDB
mza
95
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Agile that works and the tools we love
rasmusluckow
329
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Language of Interfaces
destraynor
158
25k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Statistics for Hackers
jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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は いいぞ