Web Component intro at OSDC 2014, #osdctw

1. Web Component
othree

2. othree
⚫ HappyDesigner, MozTW!
⚫ PhD Candidate @ NTUST, F2E @HTC
https://github.com/othreehttps://blog.othree.net/

3. othree

4. Why Web Component

5. Why
⚫ Rich Internet Applications!
⚫ More and more custom UI!
⚫ Complex → Modularize!
⚫ Reuse

6. Custom UI

13. What Developer Want
⚫ Modularize codes, markup and styles!
⚫ Simple and easy to reuse

14. What Developer Want
⚫ Use <magic-tag> and everything is done

15. Standards is Not
Enough

16. Standards Changes
too Slow

17. Let Web Extensible

18. Extensible Web
https://medium.com/the-future-of-the-web/2fcd1c1bb32!
http://extensiblewebmanifesto.org/!
http://www.w3.org/community/nextweb/

19. Web Component

20. Not just new markup language

21. Not one standard

22. The Standards
⚫ Shadow DOM!
⚫ Custom Element!
⚫ HTML Imports!
⚫ Template!
⚫ Scoped Style!
⚫ Mutation Observer … etc

23. Template

24. <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

25. <template id="sdom">!
<header>!
<h2>Eric</h2>!
</header>!
<section>!
<div>Digital Jedi</div>!
</section>!
<footer>!
<h4>footer text</h4>!
</footer>!
</template>

26. var tpl = document.getElementById('sdom');!
!
var dom = tpl.content.cloneNode(true);!
!
shadowRoot.appendChild(dom);

27. Shadow DOM

28. Shadow DOM
⚫ Hidden nodes in DOM tree!
⚫ Encapsulation!
⚫ Keep component simple!
⚫ Browser already have this feature
http://w3c.github.io/webcomponents/spec/shadow/

31. Take a Look

32. Use
⚫ Create shadow root!
⚫ appendChild to shadow root

33. var host = document!
.querySelector('.custom-component');!
!
var root = host.createShadowRoot();!
!
root.innerHTML = html_template_string;

34. DOM Tree
root
node
(host)
node

35. DOM Tree
Shadow Tree
root
node
(host)
Shadow
root
node
node

36. Get DOMNodes
⚫ querySelector, querySelectorAll on shadow root!
⚫ DOM API

37. Style
var html_template_string = !
!
'<style>div { color: red; }</style>' !
!
+ '<div>Click me!</div>';

38. Style in Shadow DOM
⚫ Scoped by default!
⚫ Possible to import separate css file!
⚫ Path issue

39. <option>
⚫ How to make custom element like <select>!
⚫ Fill content when using it

40. <select>
<option>

41. <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>

42. <content>
⚫ <content> as insertion point!
⚫ CSS selector to select content

44. Custom Element

45. Custom Element
⚫ Define your element!
⚫ Use API
http://w3c.github.io/webcomponents/spec/custom/

46. <element>
⚫ No more in standards

47. Register Element
registerElement(‘x-button', {prototype: xButtonProto});
element name options
prototype extend

48. 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

49. Unresolved
⚫ :unresolved can use to hide/style unresolved
elements!
⚫ Avoid FOUT

50. Custom Prototype
⚫ Inherit from HTMLElement.prototype!
⚫ Add lifecycle callbacks

51. Element Lifecycle
⚫ Define in custom element standard!
⚫ created!
⚫ attached!
⚫ detatched!
⚫ attributeChanged
https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314

52. 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}!
);

53. HTML Imports

54. Imports
⚫ Import more resources for future use!
⚫ Images, Style, Scripts…etc!
⚫ Web Component
http://www.w3.org/TR/html-imports/

55. <link rel="import" href="path/to/component.html">

56. <script>
⚫ `document` is importer!
⚫ Easy to work with document!
⚫ How to get its self!
⚫ ex: <template> in importee document

57. importer importee
document document
document.registerElement!
!
//register on importer
<link rel="import"!
href="…" />

58. importer importee
document document
<template>!
<blah />!
</template>
<link rel="import"!
href="…" />

59. importer importee
document document
<template>!
<blah />!
</template>!
!
<script>!
!
// How to get template?!
!
</script>
<link rel="import"!
href="…" />

60. document.currentScript.ownerDocument;

61. 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

62. importer importee
document document.currentScript
<template>!
<blah />!
</template>!
!
<script>!
!
document.currentScript!
.ownerDocument!
!
</script>
<link rel="import"!
href="…" />

63. All Together

64. Demo
https://github.com/othree/web-component-test

65. Libs

66. X-Tag
⚫ by Mozilla!
⚫ Easy to create custom element
http://www.x-tags.org/

67. Brick
⚫ by Mozilla!
⚫ Repository for Custom-UI build by X-Tag
http://mozilla.github.io/brick/

68. Polymer
⚫ by Google!
⚫ Application build upon Web Component!
⚫ Polyfills!
⚫ Share with X-Tag
http://www.polymer-project.org/

70. more..

71. ⚫ Semantic!
⚫ Accessibility!
⚫ Internationalization!
⚫ Security!
⚫ Performance!
⚫ OS Native UI…

72. https://www.youtube.com/watch?v=e29D1daRYrQ

73. Q&A

74. > B