Slide 1
Slide 1 text
Custom Elements in UIT
⿈慈霖 Huang, Tzu-Lin
UIT Team, LINE Fukuoka
@UIT meetup Fukuoka vol.1
「現場におけるフロントエンド」
2019/08/21
1 / 33
Slide 2
Slide 2 text
⾃⼰紹介 About me
2 / 33
Slide 3
Slide 3 text
⾃⼰紹介 About me
From Taiwan
台湾
3 / 33
Slide 4
Slide 4 text
⾃⼰紹介 About me
From Taiwan
台湾
Join LINE Fukuoka in 2016
4 / 33
Slide 5
Slide 5 text
⾃⼰紹介 About me
From Taiwan
台湾
Join LINE Fukuoka in 2016
Front-end developer for 8 years
5 / 33
Slide 6
Slide 6 text
⾃⼰紹介 About me
From Taiwan
台湾
Join LINE Fukuoka in 2016
Front-end developer for 8 years
Sticker shop (
スタンプショップ)
Theme shop (
着せかえショップ)
Custom sticker (
カスタムスタンプ) CMS
6 / 33
Slide 7
Slide 7 text
What is Custom Elements?
A component library native to the browser
No additional bytes of a framework for the user
to download, parse and compile.
WHATWG Spec
https://html.spec.whatwg.org/multipage/custom-
elements.html#custom-elements
7 / 33
Slide 8
Slide 8 text
Some Real-World Examples
https://githubengineering.com/removing-jquery-
from-github-frontend/#custom-elements
https://www.webcomponents.org/author/github
8 / 33
Slide 9
Slide 9 text
Browser compatibility
9 / 33
Slide 10
Slide 10 text
How to write Custom
Elements
https://developers.google.com/web/fundamentals/web-
components/customelements
10 / 33
Slide 11
Slide 11 text
Why do we choose Custom
Elements
Let's talk about Custom Sticker (
カスタムスタンプ)
a little bit.
11 / 33
Slide 12
Slide 12 text
The Editor
12 / 33
****
****
Slide 13
Slide 13 text
The Editor
It was first made for in-house sticker designer
exclusively. (Name Sticker CMS)
13 / 33
****
****
Slide 14
Slide 14 text
The Editor
It was first made for in-house sticker designer
exclusively. (Name Sticker CMS)
LINE Creators Market will deliver the same
feature soon.
14 / 33
****
****
Slide 15
Slide 15 text
The Editor
It was first made for in-house sticker designer
exclusively. (Name Sticker CMS)
LINE Creators Market will deliver the same
feature soon.
Don't reinvent the wheel
15 / 33
****
****
Slide 16
Slide 16 text
Other reasons
We don't have to support mobile browsers.
The common web components of the editor must be
compatible with Vue.
Name Sticker CMS No Framework
LINE Creators Market
16 / 33
Slide 17
Slide 17 text
Looks good
https://custom-elements-everywhere.com/
17 / 33
Slide 18
Slide 18 text
How does it look like in
code?
In package.json
"dependencies": {
"@linecorp/name-sticker-editor": "1.1.1"
}
Then in HTML
Just like a regular HTML tag
</name-sticker-editor>
18 / 33
Slide 19
Slide 19 text
Access via JS
const nameStickerEditor = document.querySelector("name-sticker-editor
nameStickerEditor.src = "url/to/sticker/image";
nameStickerEditor.resetPath();
nameStickerEditor.addEventListener("change", evt => {});
19 / 33
Slide 20
Slide 20 text
What have we learned?
Need a convenient tool in development phase
Home-made
Storybook
Packaging and distribution of custom elements
Scenarios that suitable and not suitable for
Custom Elements
20 / 33
Slide 21
Slide 21 text
Home-made tool
21 / 33
Slide 22
Slide 22 text
Storybook
https://storybook.js.org/
A better tool for developers and users of the
custom elements to play with
22 / 33
Slide 23
Slide 23 text
Packaging
Bundled with webpack
Users need to put it in tag before
using it
Not flexible enough if users want to bundle
themselves and use it directly in JS
Lesson Learned
Multiple builds: umd and esm
<script src="/name-sticker-editor/dist/name-sticker-editor.js"></scri
import { NameStickerEditor } from "node_modules/name-sticker-editor/i
23 / 33
Slide 24
Slide 24 text
Distribution
Host on Github Enterprise
"dependencies": {
"loading-indicator": "git+ssh://git.repo.host:org/loading-indicat
}
24 / 33
Slide 25
Slide 25 text
Distribution
Host on Github Enterprise
Some CI fail because they don't support git+ssh
"dependencies": {
"loading-indicator": "git+ssh://git.repo.host:org/loading-indicat
}
25 / 33
Slide 26
Slide 26 text
Distribution
Host on Github Enterprise
Some CI fail because they don't support git+ssh
Some other CI fail because they don't have
permission to access to Github enterprise in
https.
"dependencies": {
"loading-indicator": "git+ssh://git.repo.host:org/loading-indicat
}
"dependencies": {
"loading-indicator": "https://git.repo.host/org/loading-indicator
}
26 / 33
Slide 27
Slide 27 text
Lesson Learned in
Distribution
Distribute them on npm (or private npm) the first
day.
Discuss with your users earlier
27 / 33
Slide 28
Slide 28 text
Scenarios not suitable for
Custom Elements
Custom Elements are not silver bullets.
28 / 33
Slide 29
Slide 29 text
Scenarios not suitable for
Custom Elements
Custom Elements are not like React Components or
Vue Components.
We still have to do state management
ourselves.
Encapsulation custom elements in layers of layers
just brought us more problems.
29 / 33
Slide 30
Slide 30 text
The encapsulation problem
we met
is encapsulated in
30 / 33
Slide 31
Slide 31 text
The encapsulation problem
we met
In the source code of , we have
to explicitly propagate the change event.
Because change events do not propagate out of
shadow DOM.
https://developers.google.com/web/fundamentals/web-
components/shadowdom#events
twoToneSlider.addEventListener("change", evt => {
this.dispatchEvent(new CustomEvent(evt.type, { detail: evt.detail }
});
31 / 33
Slide 32
Slide 32 text
Suitable Scenarios of
Custom Elements
Enhance existing HTML elements
Something which is difficult to implement with
only HTML and CSS
32 / 33
Slide 33
Slide 33 text
Thanks for listening
Questions?
33 / 33