Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Time for Vanilla Web Components has Arrived

Loading in …3
×

Check these out next

1 of 51 Ad
1 of 51 Ad
Advertisement

More Related Content

Advertisement
Advertisement

The Time for Vanilla Web Components has Arrived

  1. 1. The Time for Vanilla Web Components has Arrived Gil Fink sparXys CEO, @gilfink
  2. 2. We all love <div> soup
  3. 3. We all love <div> soup 3 Known website markup…
  4. 4. What if…
  5. 5. There’s an <element> for that
  6. 6. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 9 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
  7. 7. Agenda • The Problems We Faced • Web Components APIs • Templates • Imports • Shadow DOM • Custom Elements
  8. 8. 1. Undescriptive Markup Markup Example
  9. 9. 2. Poor Separation of Concerns You want HTML, CSS and JavaScript to work together You end up with a mess
  10. 10. 3. No Native Templates • Store HTML in hidden DOM element and show it • Use script tag as a template holder: <script id=”myTemplate” type=”text/template”> <div> … </div> </script>
  11. 11. 4. Bundling is Hard • You want to bundle a complex component The component includes HTML, CSS and JavaScript how would you do that? • Use a server side mechanism? • Bundler? (Webpack/Browserify)
  12. 12. Can we do better?
  13. 13. What if we could teach the browser new elements?
  14. 14. Each Element Instance • Will be a DOM element • Creates its own DOM tree • Can be accessed and manipulated using DOM functions or its own API • Is a JavaScript object • Is this possible?
  15. 15. Web Components to the Rescue • Natively-supported, standardized JavaScript components • Some general goals: Code Reuse Encapsulation Separation of Concerns Composition Theming Expressive Semantic
  16. 16. The Web Components Standard • Reusable DOM fragmentsTemplates • Load HTML declarativelyImports • DOM encapsulationShadow DOM • Create your own elements Custom Elements
  17. 17. Web Components API Support • We need Polyfills in some browsers
  18. 18. Setting The Environment • We will use the webcomponents.js Polyfill • A real world tested Polyfill • Download: • https://github.com/webcomponents/webcomponentsjs/ • Or install using your favorite package manager • Make sure the Polyfill script runs first
  19. 19. Demo Setting the environment
  20. 20. Let’s Drill Down
  21. 21. Templates • HTML element – template • Can be used to instantiate document fragments • Can wrap HTML, style tags and script tags • No data binding support out of the box! <template id=”myTemplate”> <div> … </div> </template>
  22. 22. Cloning a Template • Select the template and extract its content • Using its content property • Use the importNode function to get the cloned content • Only when the clone is appended to the DOM • The style and JavaScript are executed • Resources like images are retrieved from the server
  23. 23. Cloning a Template - Example <template id=”myTemplate”> … </template> // check template support if ('content' in document.createElement('template')) { // get the template let template = document.getElementById(‘myTemplate’); // clone the template let clone = document.importNode(template.content, true); // use the clone elm.appendChild(clone); }
  24. 24. Templates Demo
  25. 25. The Slot Element • Placeholder inside a web component • Lets you inject separate DOM trees inside a component • Named slot is used to expose more then one slot in a component • Can be partnered with template elements
  26. 26. Combining Slot and Template Elements <template id=”myTemplate”> <div> <slot name=“header"></slot> <slot name="description"></slot> </div> </template>
  27. 27. Imports • Load additional HTML documents • Without using Ajax • A new type of link tag • Use the rel attribute with the import type: <link rel=”import” href=”myImport.html”>
  28. 28. Imports and Bundling • HTML Imports are intended to be used as packaging mechanism • Enable to bundle a full component into one HTML file • The HTML can include scripts and CSS styles • The whole bundle can be retrieved in one single call
  29. 29. Imports and The DOM • Importing a document doesn’t include it into the DOM • It will parse it in memory and load all the additional resources • Use the import property of the link tag: let content = document.querySelector(‘link[rel=”import”]’).import;
  30. 30. Imports Demo
  31. 31. Import Additional Notes • Scripts running inside the import can reference the containing document by calling document.currentScript.ownerDocument • CORS constraints apply to documents imported from other domains
  32. 32. A Few Words About Script Modules • Scripts that are treated as ECMAScript modules • Module scripts don’t block the HTML parser • Resembles script defer attribute • Already implemented in most of the browsers • Probably will replace the import standard <script type=“module”> import {someFunc} from './utils.js'; someFunc('Modules are pretty cool.'); </script>
  33. 33. Shadow DOM • Encapsulate DOM parts • The browser will know how to present those parts • The browser won’t show the encapsulated parts in the source code • Creates a boundary between the component and its user
  34. 34. The Problems Shadow DOM Tries to Solve • Components/widgets encapsulation • Style leakage • Leaks from one component to another • Leaks from imported 3th party library/framework • Global DOM • id or class attributes all over the place
  35. 35. Shadow DOM in The Browser <video src="media/myVideo.mp4" controls></video> <input type="date">
  36. 36. Show Shadow DOM Elements in Chrome Demo
  37. 37. Shadow DOM – Cont. • Use the attachShadow function to wrap an element as a shadow root: • Mode property: • open - elements of the shadow root are accessible from the outside using element.shadowRoot • closed - denies any access to node(s) inside the shadow root let host = document.getElementByIt(‘shadowDOMHost’); let root = host.attachShadow({mode: 'open'}); root.innerHTML = ‘<div>Lurking in the shadows</div>’;
  38. 38. Styling Shadow DOM • Shadow DOM can have inline styles • Using :host, :host() and :host-context pseudo-classes • ::slotted() pseudo-element <div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template> </div>
  39. 39. Shadow DOM Demo
  40. 40. Custom Elements • Enable to extend or create custom HTML elements • Defined using the customElements.define function: or extend an existing element: let myInput = window.customElements.define(‘my-input’, class x extends HTMLElement {…}); let myInput = window.customElements.define(‘my-input’, class y extends HTMLInputElement {...});
  41. 41. Custom Elements – Naming • You can create named elements (almost) any way you want: • Same naming rules as other HTML tags • There must be a dash (“-”) in the name • To future-proof the name against the HTML standard • To avoid naming collisions
  42. 42. Custom Elements – Usage • Use the element in your DOM: or use the createElement function: <my-input></my-input> let elm = document.createElement(‘my-input’);
  43. 43. Custom Element Life Cycle Events • connectedCallback • disconnectedCallback • attributeChangedCallback • adoptedCallback class MyInput extends HTMLElement { constructor() { super(); // your initialization code goes here } connectedCallback() {…} disconnectedCallback() {…} attributeChangedCallback() {…} adoptedCallback() {…} }
  44. 44. Observing Attribute Changes • First list all the observed properties • Use the observedAttributes getter • Wire the attributeChangedCallback • Will be called for every attribute that changes class MyInput extends HTMLElement { constructor() { super(); // your initialization code goes here } static get observedAttributes() { return ['attrName']; } attributeChangedCallback(name, oldValue, newValue) { … } }
  45. 45. customElements Registry • Includes API to • Define custom elements using the define function • Get custom element definition using the get function • Understand if a custom element is defined using the whenDefined function • Useful to defer work until the elements are really defined
  46. 46. Custom Elements Demo
  47. 47. The Current State of Web Components • Still not a recommendation (yet) • Browser support: http://caniuse.com/#search=web%20components • Known web component libraries: Polymer X-Tag Stencil Slim.js Skate.js
  48. 48. Summary • Web Components are emerging standards that enable: • Encapsulation • Separation of Concerns • Element portability • And more • They are still in development!
  49. 49. Questions?
  50. 50. #UseThePlatform
  51. 51. Thank You!

×