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 Component
Search
othree
April 11, 2014
Technology
7
1.4k
Web Component
othree
April 11, 2014
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.8k
WAT JavaScript Date
othree
3
1.9k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.6k
Web Trends to 2015
othree
4
310
Transducer
othree
9
2.8k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.1k
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
130
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
890
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
220
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
We Have a Design System, Now What?
morganepeng
50
7.2k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Side Projects
sachag
452
42k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Facilitating Awesome Meetings
lara
50
6.1k
Scaling GitHub
holman
458
140k
Transcript
Web Component othree
othree ⚫ HappyDesigner, MozTW! ⚫ PhD Candidate @ NTUST, F2E
@HTC https://github.com/othree https://blog.othree.net/
othree
Why Web Component
Why ⚫ Rich Internet Applications! ⚫ More and more custom
UI! ⚫ Complex → Modularize! ⚫ Reuse
Custom UI
None
None
None
None
None
None
What Developer Want ⚫ Modularize codes, markup and styles! ⚫
Simple and easy to reuse
What Developer Want ⚫ Use <magic-tag> and everything is done
Standards is Not Enough
Standards Changes too Slow
Let Web Extensible
Extensible Web https://medium.com/the-future-of-the-web/2fcd1c1bb32! http://extensiblewebmanifesto.org/! http://www.w3.org/community/nextweb/
Web Component
Not just new markup language
Not one standard
The Standards ⚫ Shadow DOM! ⚫ Custom Element! ⚫ HTML
Imports! ⚫ Template! ⚫ Scoped Style! ⚫ Mutation Observer … etc
Template
<template> ⚫ Provide reusable DOMNode! ⚫ Parse but not render!
⚫ Used to use <script type="text/template">! ⚫ Not parse at all http://www.w3.org/TR/html5/scripting-1.html#the-template-element
<template id="sdom">! <header>! <h2>Eric</h2>! </header>! <section>! <div>Digital Jedi</div>! </section>! <footer>!
<h4>footer text</h4>! </footer>! </template>
var tpl = document.getElementById('sdom');! ! var dom = tpl.content.cloneNode(true);! !
shadowRoot.appendChild(dom);
Shadow DOM
Shadow DOM ⚫ Hidden nodes in DOM tree! ⚫ Encapsulation!
⚫ Keep component simple! ⚫ Browser already have this feature http://w3c.github.io/webcomponents/spec/shadow/
None
None
Take a Look
Use ⚫ Create shadow root! ⚫ appendChild to shadow root
var host = document! .querySelector('.custom-component');! ! var root = host.createShadowRoot();!
! root.innerHTML = html_template_string;
DOM Tree root node (host) node
DOM Tree Shadow Tree root node (host) Shadow root node
node
Get DOMNodes ⚫ querySelector, querySelectorAll on shadow root! ⚫ DOM
API
Style var html_template_string = ! ! '<style>div { color: red;
}</style>' ! ! + '<div>Click me!</div>';
Style in Shadow DOM ⚫ Scoped by default! ⚫ Possible
to import separate css file! ⚫ Path issue
<option> ⚫ How to make custom element like <select>! ⚫
Fill content when using it
<select> <option>
<magic-tag id="example4">! <h2>Eric</h2>! <h2>Bidelman</h2>! <div>Digital Jedi</div>! <h4>footer text</h4>! </magic-tag>! !
<template id="sdom">! <header>! <content select="h2"></content>! </header>! <section>! <content select="div"></content>! </section>! <footer>! <content select="h4:first-of-type"></content>! </footer>! </template>
<content> ⚫ <content> as insertion point! ⚫ CSS selector to
select content
None
Custom Element
Custom Element ⚫ Define your element! ⚫ Use API http://w3c.github.io/webcomponents/spec/custom/
<element> ⚫ No more in standards
Register Element registerElement(‘x-button', {prototype: xButtonProto}); element name options prototype extend
Custom Element Name ⚫ Custom element’s name should have “-”!
⚫ ex: x-button, my-slider! ⚫ With “-”, element don’t know by browser will treat as unresolved element, otherwise it will be unknown element
Unresolved ⚫ :unresolved can use to hide/style unresolved elements! ⚫
Avoid FOUT
Custom Prototype ⚫ Inherit from HTMLElement.prototype! ⚫ Add lifecycle callbacks
Element Lifecycle ⚫ Define in custom element standard! ⚫ created!
⚫ attached! ⚫ detatched! ⚫ attributeChanged https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
var doc = document.currentScript.ownerDocument;! ! var xButtonProto = Object.create(HTMLElement.prototype);! !
! xButtonProto.createdCallback = function () {! var root = this;! var host = this.webkitCreateShadowRoot();! //host blah blah ...! };! ! ! document.registerElement(‘x-button',! {prototype: xButtonProto}! );
HTML Imports
Imports ⚫ Import more resources for future use! ⚫ Images,
Style, Scripts…etc! ⚫ Web Component http://www.w3.org/TR/html-imports/
<link rel="import" href="path/to/component.html">
<script> ⚫ `document` is importer! ⚫ Easy to work with
document! ⚫ How to get its self! ⚫ ex: <template> in importee document
importer importee document document document.registerElement! ! //register on importer <link
rel="import"! href="…" />
importer importee document document <template>! <blah />! </template> <link rel="import"!
href="…" />
importer importee document document <template>! <blah />! </template>! ! <script>!
! // How to get template?! ! </script> <link rel="import"! href="…" />
document.currentScript.ownerDocument;
currentScript ⚫ HTML5 API! ⚫ For 3rd party widgets to
locate <script> position http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript
importer importee document document.currentScript <template>! <blah />! </template>! ! <script>!
! document.currentScript! .ownerDocument! ! </script> <link rel="import"! href="…" />
All Together
Demo https://github.com/othree/web-component-test
Libs
X-Tag ⚫ by Mozilla! ⚫ Easy to create custom element
http://www.x-tags.org/
Brick ⚫ by Mozilla! ⚫ Repository for Custom-UI build by
X-Tag http://mozilla.github.io/brick/
Polymer ⚫ by Google! ⚫ Application build upon Web Component!
⚫ Polyfills! ⚫ Share with X-Tag http://www.polymer-project.org/
None
more..
⚫ Semantic! ⚫ Accessibility! ⚫ Internationalization! ⚫ Security! ⚫ Performance!
⚫ OS Native UI…
https://www.youtube.com/watch?v=e29D1daRYrQ
Q&A
> B