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
200
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
680
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.4k
App Shortcuts
tiwu_dev
0
900
Web Vitals
tiwu_dev
0
72
Web Share API
tiwu_dev
0
1.4k
Badge in Background
tiwu_dev
0
73
PWAとCache API #frontkansai
tiwu_dev
5
2.2k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.5k
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
620
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
120
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
190
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
1.3k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Wasmのエコシステムを使った ツール作成方法
askua
0
160
Featured
See All Featured
Scaling GitHub
holman
463
140k
Statistics for Hackers
jakevdp
799
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Designing for humans not robots
tammielis
254
26k
Optimizing for Happiness
mojombo
379
70k
Writing Fast Ruby
sferik
629
62k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
For a Future-Friendly Web
brad_frost
180
9.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
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は いいぞ