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
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
710
Postman AI エージェントビルダー最新情報
nagix
0
110
本が全く読めなかった過去の自分へ
genshun9
0
400
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
フィンテック養成勉強会#54
finengine
0
180
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Lambda Web Adapterについて自分なりに理解してみた
smt7174
3
110
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Ace a Technical Interview
jacobian
277
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualization
eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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