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
790
効果的な管理画面を デザインをするために 避けるべき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
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
350
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
サバイバルモード下でのエンジニアリングマネジメント
konifar
20
6k
AIエージェント元年@日本生成AIユーザ会
shukob
1
250
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.5k
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
200
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.6k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
820
Featured
See All Featured
Site-Speed That Sticks
csswizardry
4
410
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Making Projects Easy
brettharned
116
6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How STYLIGHT went responsive
nonsquared
99
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
A Philosophy of Restraint
colly
203
16k
Scaling GitHub
holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to Ace a Technical Interview
jacobian
276
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
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)