Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

tiwu
April 04, 2019
Technology
0
180

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Meguro.esのWeb Components（勝手に） 作ってみた #meguroes

tiwu

April 04, 2019
Tweet

More Decks by tiwu

See All by tiwu
Eleventy で SSG
tiwu_dev
2
620
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.1k
App Shortcuts
tiwu_dev
0
810
Web Vitals
tiwu_dev
0
60
Web Share API
tiwu_dev
0
1.1k
Badge in Background
tiwu_dev
0
51
PWAとCache API #frontkansai
tiwu_dev
5
1.9k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.2k

Other Decks in Technology

See All in Technology
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
200
pg_bigmをRustで実装する（第50回PostgreSQLアンカンファレンス@オンライン 発表資料）
shinyakato_
0
120
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
130
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
510
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
280
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
160
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
560
組織に自動テストを書く文化を根付かせる戦略（2024冬版） / Building Automated Test Culture 2024 Winter Edition
twada
PRO
18
5.7k
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
330
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
230
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
170
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
110

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Speed Design
sergeychernyshev
25
680
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Writing Fast Ruby
sferik
628
61k
Producing Creativity
orderedlist
PRO
342
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
The Pragmatic Product Professional
lauravandoore
32
6.3k
Testing 201, or: Great Expectations
jmmastey
41
7.1k
Become a Pro
speakerdeck
PRO
26
5k

Transcript

  1. Meguro.esの Web Components（勝手に） 作ってみた Wataru Taguchi

  2. アジェンダ • 自己紹介 • 作ったぞい • まとめ

  3. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer -

    PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

  4. みなさん！

  5. Meguro.esが好きですか！

  6. Meguro.esのロゴを 自分のサイトに 表示させたいですよね！

  7. Meguro.esのイベント情報 を自分のサイトに 表示させたいですよね！

  8. それWeb Components でできるよ

  9. <meguro-es-logo> <meguro-es-connpass-list>

  10. https://informal-meguro-es-we b-components.netlify.com/

  11. 使い方

  12. <script type="module" src="./src/js/meguroEsConnpassList.js"> </script>

  13. <meguro-es-connpass-list> </meguro-es-connpass-list>

  14. かんたん！！！！

  15. https://github.com/tiwuofficial/i nformal-meguro-es-web-comp onents

  16. Web Components? • カスタム要素 • Shadow DOM • HTML テンプレート

  17. カスタム要素

  18. Shadow DOM

  19. • constructorとconnectedCallbackの違いに気づく のが遅かった • conpassのAPIがJSONPだった つらみ

  20. Web Componentsは いいぞ