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
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
アジャイル開発とスクラム
araihara
0
160
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Building Products in the LLM Era
ymatsuwitter
10
4.4k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Speed Design
sergeychernyshev
25
780
A Tale of Four Properties
chriscoyier
158
23k
Thoughts on Productivity
jonyablonski
69
4.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Code Reviewing Like a Champion
maltzj
521
39k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Unsuck your backbone
ammeep
669
57k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
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)