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.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
2k
YAJS.vim and Vim Syntax Highlight
othree
1
2.5k
Web Trends to 2015
othree
4
300
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
Dojo 20240830 COBOL to Java on Z
ichikawayasuhisa
0
240
Javaにおける関数型プログラミンへの取り組み
skrb
7
270
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
1.9k
データウェアハウス製品のSnowflakeでPythonが動くって知ってました?
foursue
1
160
FastConnect の冗長性
ocise
0
7.1k
自社サービスのための独自リリース版Redmine「RedMica」の取り組み
vividtone
0
770
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
160
Dify - LINE Bot連携 考え方と実用テクニック
uezo
5
1.1k
LandingZoneAccelerator と学ぶ 「スケーラブルで安全なマルチアカウントAWS環境」と 私たちにもできるベストプラクティス
maimyyym
1
110
Oracle Autonomous Database:サービス概要のご紹介
oracle4engineer
PRO
1
6.8k
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
800
四国クラウドお遍路 2024 in 高知 オープニング
yukataoka
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Building an army of robots
kneath
302
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
For a Future-Friendly Web
brad_frost
173
9.3k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Documentation Writing (for coders)
carmenintech
65
4.3k
Visualization
eitanlees
142
15k
GraphQLとの向き合い方2022年版
quramy
43
13k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
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