2019 DevDay
Custom Elements in Custom
Stickers
> Tzulin Huang
> LINE Fukuoka UIT Team Front-end Engineer
Slide 2
Slide 2 text
LINE Custom Stickers
Slide 3
Slide 3 text
For in-House Designers and 3rd Party Designers
Custom Stickers CMS
Slide 4
Slide 4 text
Custom Stickers
LINE Shop
Custom
Stickers CMS
SVG
PNG
Customized
Text
Slide 5
Slide 5 text
LINE Creators Market
Public to all Creators
Slide 6
Slide 6 text
That Could Be Shared Between Custom Sticker CMS and Creators Market
> Form Controls
> The Custom Text Editor
There Are Some Common Parts
Slide 7
Slide 7 text
Custom Text Editor
Slide 8
Slide 8 text
> Make it componentized and reusable
> The user interaction is somewhat complicated
Custom Text Editor
Slide 9
Slide 9 text
> Easy to integrate with other front-end frameworks
> Must be a common technology
Consideration of Componentize
Slide 10
Slide 10 text
Custom Elements
Slide 11
Slide 11 text
https://github.blog/2018-09-06-removing-jquery-from-github-frontend/#custom-elements
> No additional bytes of a framework for the user to download, parse and
compile
> A component library native to the browser
Custom Elements
Framework Compatibility
https://custom-elements-everywhere.com/
> Custom Elements work well with Vue JS
> Creators Market heavily adopted Vue JS
Angular Svelte
Others
Slide 14
Slide 14 text
> There are plenty of good tutorial and documentation
• https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
• https://developers.google.com/web/fundamentals/web-components/customelements
> Or just google “Custom Elements”
> Not part of my topic
How To Develop Custom Elements
Slide 15
Slide 15 text
The Benefit It Brings Us
Reusability
Encapsulate and re-use
complicated UI logic in
Vanilla JS
Interoperability
Improve web apps’
interoperability among
browsers
Extendability
Extend insufficient
HTML elements
Slide 16
Slide 16 text
The Benefit It Brings Us
Reusability
Interoperability
Extendability
Slide 17
Slide 17 text
The actual custom element for editing custom sticker
Slide 18
Slide 18 text
Use It in HTML
Slide 19
Slide 19 text
Use It in JS
Slide 20
Slide 20 text
> No standard CSS pseudo selectors
> It is very hard to customize style of
Slide 21
Slide 21 text
> works in all major browsers
Interoperability
Slide 22
Slide 22 text
https://github.com/whatwg/html/issues/1467#issuecomment-447650684
> In maxlength Computation of
, Non-BMP
Characters Are Counted Differently Among
Major Browsers
> Languages of South Asia and South-East Asia
Heavily Use non-BMP Characters
> Compatible with modern browsers and most front-end frameworks
> Custom Element is the browser-native component library
The Takeaways
> Reusability, Interoperability, Extendability