Web Component
othree
othree
⚫ HappyDesigner, MozTW!
⚫ PhD Candidate @ NTUST, F2E @HTC
https://github.com/othreehttps://blog.othree.net/
othree
Why Web Component
Why
⚫ Rich Internet Applications!
⚫ More and more custom UI!
⚫ Complex → Modularize!
⚫ Reuse
Custom UI
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...
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...
<template id="sdom">!
<header>!
<h2>Eric</h2>!
</header>!
<section>!
<div>Digital Jedi</div>!
</section>!
<footer>!
<h4>fo...
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:...
Take a Look
Use
⚫ Create shadow root!
⚫ appendChild to shadow root
var host = document!
.querySelector('.custom-component');!
!
var root = host.createShadowRoot();!
!
root.innerHTML = html_...
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>!
...
<content>
⚫ <content> as insertion point!
⚫ CSS selector to select content
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 ...
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.w...
var doc = document.currentScript.ownerDocument;!
!
var xButtonProto = Object.create(HTMLElement.prototype);!
!
!
xButtonPr...
HTML Imports
Imports
⚫ Import more resources for future use!
⚫ Images, Style, Scripts…etc!
⚫ Web Component
http://www.w3.org/TR/html-im...
<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 docum...
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>
...
document.currentScript.ownerDocument;
currentScript
⚫ HTML5 API!
⚫ For 3rd party widgets to locate <script> position
http://www.whatwg.org/specs/web-apps/curren...
importer importee
document document.currentScript
<template>!
<blah />!
</template>!
!
<script>!
!
document.currentScript!...
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/
more..
⚫ Semantic!
⚫ Accessibility!
⚫ Internationalization!
⚫ Security!
⚫ Performance!
⚫ OS Native UI…
https://www.youtube.com/watch?v=e29D1daRYrQ
Q&A
> B
Web Component
Web Component
Web Component
Web Component
Web Component
Web Component
Web Component
Web Component
Web Component
Web Component
Upcoming SlideShare
Loading in...5
×

Web Component

944

Published on

Web Component intro at OSDC 2014, #osdctw

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
944
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Component

  1. 1. Web Component othree
  2. 2. othree ⚫ HappyDesigner, MozTW! ⚫ PhD Candidate @ NTUST, F2E @HTC https://github.com/othreehttps://blog.othree.net/
  3. 3. othree
  4. 4. Why Web Component
  5. 5. Why ⚫ Rich Internet Applications! ⚫ More and more custom UI! ⚫ Complex → Modularize! ⚫ Reuse
  6. 6. Custom UI
  7. 7. What Developer Want ⚫ Modularize codes, markup and styles! ⚫ Simple and easy to reuse
  8. 8. What Developer Want ⚫ Use <magic-tag> and everything is done
  9. 9. Standards is Not Enough
  10. 10. Standards Changes too Slow
  11. 11. Let Web Extensible
  12. 12. Extensible Web https://medium.com/the-future-of-the-web/2fcd1c1bb32! http://extensiblewebmanifesto.org/! http://www.w3.org/community/nextweb/
  13. 13. Web Component
  14. 14. Not just new markup language
  15. 15. Not one standard
  16. 16. The Standards ⚫ Shadow DOM! ⚫ Custom Element! ⚫ HTML Imports! ⚫ Template! ⚫ Scoped Style! ⚫ Mutation Observer … etc
  17. 17. Template
  18. 18. <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
  19. 19. <template id="sdom">! <header>! <h2>Eric</h2>! </header>! <section>! <div>Digital Jedi</div>! </section>! <footer>! <h4>footer text</h4>! </footer>! </template>
  20. 20. var tpl = document.getElementById('sdom');! ! var dom = tpl.content.cloneNode(true);! ! shadowRoot.appendChild(dom);
  21. 21. Shadow DOM
  22. 22. Shadow DOM ⚫ Hidden nodes in DOM tree! ⚫ Encapsulation! ⚫ Keep component simple! ⚫ Browser already have this feature http://w3c.github.io/webcomponents/spec/shadow/
  23. 23. Take a Look
  24. 24. Use ⚫ Create shadow root! ⚫ appendChild to shadow root
  25. 25. var host = document! .querySelector('.custom-component');! ! var root = host.createShadowRoot();! ! root.innerHTML = html_template_string;
  26. 26. DOM Tree root node (host) node
  27. 27. DOM Tree Shadow Tree root node (host) Shadow root node node
  28. 28. Get DOMNodes ⚫ querySelector, querySelectorAll on shadow root! ⚫ DOM API
  29. 29. Style var html_template_string = ! ! '<style>div { color: red; }</style>' ! ! + '<div>Click me!</div>';
  30. 30. Style in Shadow DOM ⚫ Scoped by default! ⚫ Possible to import separate css file! ⚫ Path issue
  31. 31. <option> ⚫ How to make custom element like <select>! ⚫ Fill content when using it
  32. 32. <select> <option>
  33. 33. <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>
  34. 34. <content> ⚫ <content> as insertion point! ⚫ CSS selector to select content
  35. 35. Custom Element
  36. 36. Custom Element ⚫ Define your element! ⚫ Use API http://w3c.github.io/webcomponents/spec/custom/
  37. 37. <element> ⚫ No more in standards
  38. 38. Register Element registerElement(‘x-button', {prototype: xButtonProto}); element name options prototype extend
  39. 39. 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
  40. 40. Unresolved ⚫ :unresolved can use to hide/style unresolved elements! ⚫ Avoid FOUT
  41. 41. Custom Prototype ⚫ Inherit from HTMLElement.prototype! ⚫ Add lifecycle callbacks
  42. 42. Element Lifecycle ⚫ Define in custom element standard! ⚫ created! ⚫ attached! ⚫ detatched! ⚫ attributeChanged https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
  43. 43. 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}! );
  44. 44. HTML Imports
  45. 45. Imports ⚫ Import more resources for future use! ⚫ Images, Style, Scripts…etc! ⚫ Web Component http://www.w3.org/TR/html-imports/
  46. 46. <link rel="import" href="path/to/component.html">
  47. 47. <script> ⚫ `document` is importer! ⚫ Easy to work with document! ⚫ How to get its self! ⚫ ex: <template> in importee document
  48. 48. importer importee document document document.registerElement! ! //register on importer <link rel="import"! href="…" />
  49. 49. importer importee document document <template>! <blah />! </template> <link rel="import"! href="…" />
  50. 50. importer importee document document <template>! <blah />! </template>! ! <script>! ! // How to get template?! ! </script> <link rel="import"! href="…" />
  51. 51. document.currentScript.ownerDocument;
  52. 52. 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
  53. 53. importer importee document document.currentScript <template>! <blah />! </template>! ! <script>! ! document.currentScript! .ownerDocument! ! </script> <link rel="import"! href="…" />
  54. 54. All Together
  55. 55. Demo https://github.com/othree/web-component-test
  56. 56. Libs
  57. 57. X-Tag ⚫ by Mozilla! ⚫ Easy to create custom element http://www.x-tags.org/
  58. 58. Brick ⚫ by Mozilla! ⚫ Repository for Custom-UI build by X-Tag http://mozilla.github.io/brick/
  59. 59. Polymer ⚫ by Google! ⚫ Application build upon Web Component! ⚫ Polyfills! ⚫ Share with X-Tag http://www.polymer-project.org/
  60. 60. more..
  61. 61. ⚫ Semantic! ⚫ Accessibility! ⚫ Internationalization! ⚫ Security! ⚫ Performance! ⚫ OS Native UI…
  62. 62. https://www.youtube.com/watch?v=e29D1daRYrQ
  63. 63. Q&A
  64. 64. > B
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×