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.5k
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
2k
WAT JavaScript Date
othree
3
2k
Modern HTML Email Development
othree
3
2.6k
MRT & GIT
othree
1
2.2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.8k
Web Trends to 2015
othree
4
320
Transducer
othree
9
2.9k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
Model Mondays S2E02: Model Context Protocol
nitya
0
190
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
120
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
500
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
220
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
1
310
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
1.1k
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
110
Welcome to the LLM Club
koic
0
130
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
370
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
160
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
870
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
150
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Statistics for Hackers
jakevdp
799
220k
BBQ
matthewcrist
89
9.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Cult of Friendly URLs
andyhume
79
6.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
GitHub's CSS Performance
jonrohan
1031
460k
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