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.7k
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
3k
HITCON 11 Photographer
othree
4
480
fetch is the new XHR
othree
6
3.5k
Other Decks in Technology
See All in Technology
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
280
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
280
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
270
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
420
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
400
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
110
20250728 MCP, A2A and Multi-Agents in the future
yoshidashingo
1
110
Expertise as a Service via MCP
yodakeisuke
1
160
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
340
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
210
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Done Done
chrislema
184
16k
Agile that works and the tools we love
rasmusluckow
329
21k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building Applications with DynamoDB
mza
95
6.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
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