Web Component

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
April 11, 2014

Web Component

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

April 11, 2014
Tweet

Transcript

  1. 2.

    othree ⚫ HappyDesigner, MozTW! ⚫ PhD Candidate @ NTUST, F2E

    @HTC https://github.com/othree https://blog.othree.net/
  2. 3.
  3. 5.

    Why ⚫ Rich Internet Applications! ⚫ More and more custom

    UI! ⚫ Complex → Modularize! ⚫ Reuse
  4. 7.
  5. 8.
  6. 9.
  7. 10.
  8. 11.
  9. 12.
  10. 22.

    The Standards ⚫ Shadow DOM! ⚫ Custom Element! ⚫ HTML

    Imports! ⚫ Template! ⚫ Scoped Style! ⚫ Mutation Observer … etc
  11. 23.
  12. 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
  13. 28.

    Shadow DOM ⚫ Hidden nodes in DOM tree! ⚫ Encapsulation!

    ⚫ Keep component simple! ⚫ Browser already have this feature http://w3c.github.io/webcomponents/spec/shadow/
  14. 29.
  15. 30.
  16. 37.

    Style var html_template_string = ! ! '<style>div { color: red;

    }</style>' ! ! + '<div>Click me!</div>';
  17. 38.

    Style in Shadow DOM ⚫ Scoped by default! ⚫ Possible

    to import separate css file! ⚫ Path issue
  18. 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>
  19. 43.
  20. 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
  21. 51.

    Element Lifecycle ⚫ Define in custom element standard! ⚫ created!

    ⚫ attached! ⚫ detatched! ⚫ attributeChanged https://www.w3.org/Bugs/Public/show_bug.cgi?id=24314
  22. 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}! );
  23. 54.

    Imports ⚫ Import more resources for future use! ⚫ Images,

    Style, Scripts…etc! ⚫ Web Component http://www.w3.org/TR/html-imports/
  24. 56.

    <script> ⚫ `document` is importer! ⚫ Easy to work with

    document! ⚫ How to get its self! ⚫ ex: <template> in importee document
  25. 59.

    importer importee document document <template>! <blah />! </template>! ! <script>!

    ! // How to get template?! ! </script> <link rel="import"! href="…" />
  26. 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
  27. 62.

    importer importee document document.currentScript <template>! <blah />! </template>! ! <script>!

    ! document.currentScript! .ownerDocument! ! </script> <link rel="import"! href="…" />
  28. 65.
  29. 67.

    Brick ⚫ by Mozilla! ⚫ Repository for Custom-UI build by

    X-Tag http://mozilla.github.io/brick/
  30. 68.

    Polymer ⚫ by Google! ⚫ Application build upon Web Component!

    ⚫ Polyfills! ⚫ Share with X-Tag http://www.polymer-project.org/
  31. 69.
  32. 70.
  33. 73.

    Q&A

  34. 74.

    > B