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
890
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.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.5k
Other Decks in Technology
See All in Technology
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
200
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
650
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
610
Where will it converge?
ibknadedeji
0
210
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
210
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
290
許しとアジャイル
jnuank
1
150
Featured
See All Featured
Bash Introduction
62gerente
615
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
A designer walks into a library…
pauljervisheath
209
24k
GitHub's CSS Performance
jonrohan
1032
470k
Building Applications with DynamoDB
mza
96
6.7k
The Language of Interfaces
destraynor
162
25k
The Invisible Side of Design
smashingmag
302
51k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Optimizing for Happiness
mojombo
379
70k
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は いいぞ