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 with Vue.js 2018
Search
takanorip
July 30, 2018
Technology
0
200
Web Components with Vue.js 2018
takanorip
July 30, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
96
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
760
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.8k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.7k
早わかり W3C Community Group
takanorip
0
450
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
Larkご案内資料
customercloud
PRO
0
600
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
2.5Dモデルのすべて
yu4u
2
610
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
2
390
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
Featured
See All Featured
Done Done
chrislema
182
16k
BBQ
matthewcrist
86
9.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Adopting Sorbet at Scale
ufuk
74
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Facilitating Awesome Meetings
lara
51
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
Web Components with Vue.js 2018 Takanori OKi @Vue.js Night Nagoya
Self Introduction • Takanori Oki ( @takanorip ) • SmartDrive
Inc. Frontend Developer based in Tokyo • Nuxt.js, React, Polymer, etc… • Polymer Japan Translation team • I have published a book recently !
None
None
What are Web Components?
What are Web Components? Web components are a set of
web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. by webcomponents.org
Feature of Web Components • Based on existing web standards
• Can make components that is encapsulated styling • Can Use with any JavaScript Frameworks
What are Web Components? • Custom Elements • Shadow DOM
• HTML Imports (deprecated) → Under Discussion (ES Modules / HTML Modules?) • HTML Templates
Browser support Chrome Safari Firefox Edge HTML Templates STABLE STABLE
STABLE STABLE Custom Elements STABLE STABLE DEVELOPING CONSIDERING Shadow DOM STABLE STABLE DEVELOPING CONSIDERING ES Modules STABLE STABLE STABLE STABLE HTML Imports STABLE POLYFILL POLYFILL POLYFILL
Web Components with Vue.js
We want to use same custom components between different JavaScript
Frameworks !!! (React, Vue, Angular…)
How use Web Components?
lit-html https://github.com/Polymer/lit-html
What is lit-html? • JavaScript template literals + HTML templates
• Extremely fast • Give you the full power of JavaScript and functional programming patterns • Extremely customizable and extensible
None
None
None
lit-extended • lit-html is a library for handling HTML •
So it can pass values to component as String only • lit-extended is a solution of this demerit
Create Web Components with Vue CLI 3
vue-web-component-wrapper • Wrap and register a Vue component as a
custom element • Use Vue Components in Other JS Frameworks (React, Angular…) as a Web Components • Not affected by external CSS
None
Building • Use “vue-cli-service build” command • Produce a production-ready
bundle with minification for JS/CSS/HTML • Also Use “—target wc” option • Create a bundle for building a web component
None
THANK YOU ! ( Font : Vegur)