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
Web Components(勝手に) 作ってみた #sakenight8
Search
tiwu
April 06, 2019
Technology
0
150
Web Components(勝手に) 作ってみた #sakenight8
LT資料です
https://sakeganaito.connpass.com/event/123806/
tiwu
April 06, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
550
Eleventy - 11ty
tiwu_dev
0
110
Install for PWA
tiwu_dev
0
880
App Shortcuts
tiwu_dev
0
730
Web Vitals
tiwu_dev
0
57
Web Share API
tiwu_dev
0
890
Badge in Background
tiwu_dev
0
43
PWAとCache API #frontkansai
tiwu_dev
5
1.6k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
990
Other Decks in Technology
See All in Technology
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
440
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
KTC_DBRE.pdf
_awache
0
290
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
Featured
See All Featured
Statistics for Hackers
jakevdp
789
220k
Infographics Made Easy
chrislema
237
18k
The Mythical Team-Month
searls
214
42k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Become a Pro
speakerdeck
PRO
8
4.4k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Unsuck your backbone
ammeep
661
56k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Docker and Python
trallard
33
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Transcript
『酒がないとプログラム書けない!』の Web Components(勝手に) 作ってみた Wataru Taguchi
アジェンダ • 自己紹介 • 作ったぞい • Web Components • まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
みなさん!
お酒は好きですか!
酒がないとプログラミングでき ないですよね!
アルコール駆動開発 していますよね?
IT勉強会グループ 『酒がないとプログラム書けない!』 が好きですよね!!
IT勉強会グループ 『酒がないとプログラム書けない!』 のイベント情報を自分のサイトに 表示させたいですよね!
それWeb Components でできるよ
<sakeganaito-logo> <sakeganaito-connpass-list>
https://informal-sakeganaito-web-compo nents.netlify.com/
使い方
かんたん 2STEP
<script type="module" src="./src/js/sakeganaitoConnpassList.js"> </script> その1
<sakeganaito-connpass-list> </sakeganaito-connpass-list> その2
https://github.com/tiwuofficial/i nformal-sakeganaito-web-com ponents
Web Components • カスタム要素 • Shadow DOM • HTML テンプレート
カスタム要素
Shadow DOM・HTML テンプレート
Web Componentsは いいぞ