Web Components with
Vue.js 2018
Takanori OKi @Vue.js Night Nagoya
Slide 2
Slide 2 text
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 !
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
What are Web Components?
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Feature of Web Components
• Based on existing web standards
• Can make components that is encapsulated styling
• Can Use with any JavaScript Frameworks
Slide 8
Slide 8 text
What are Web Components?
• Custom Elements
• Shadow DOM
• HTML Imports (deprecated)
→ Under Discussion
(ES Modules / HTML Modules?)
• HTML Templates
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
Web Components with Vue.js
Slide 11
Slide 11 text
We want to use same
custom components
between different
JavaScript
Frameworks !!!
(React, Vue, Angular…)
Slide 12
Slide 12 text
How use Web Components?
Slide 13
Slide 13 text
lit-html
https://github.com/Polymer/lit-html
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Create Web Components
with Vue CLI 3
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
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