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
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
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
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
手を動かしてレベルアップしよう!
maruto
0
220
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
400
IAMのマニアックな話2025
nrinetcom
PRO
4
910
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
260
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
220
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
220
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
630
Featured
See All Featured
Side Projects
sachag
452
42k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
GraphQLとの向き合い方2022年版
quramy
44
14k
How GitHub (no longer) Works
holman
314
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
It's Worth the Effort
3n
184
28k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
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)