Web Components v1

Quick intro to Web Components v1

Transcript

1. Web Componentes
   

   View Slide

2. · tag
   · HTML imports
   · Shadow DOM
   · Custom Elements
   

   View Slide

3. 
   

   View Slide

4. 'content' in document.createElement('template');
   

   View Slide

5. Activating :
   var t = document.querySelector('#aweTemplate');
   var clone = document.importNode(t.content, true);
   document.body.appendChild(clone);
   

   View Slide

6. DEMO
   

   View Slide

7. HTML imports
   

   View Slide

8. 'import' in document.createElement('link');
   

   View Slide

9. 
   onload="handleLoad(event)" onerror="handleError(event)">
   

   View Slide

10. const link = document.querySelector('link[rel=import]');
    const xkcd = link.import;
    // Access DOM of the document in aweTemplate
    const cartoon = xkcd.querySelector('img');
    

    View Slide

11. const aweDoc = document.currentScript.ownerDocument;
    

    View Slide

12. DEMO
    

    View Slide

13. Shadow DOM
    

    View Slide

14. const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;
    

    View Slide

15. const host = document.body.createShadowRoot();
    host.innerHTML = "I'm a shadow dom!";
    document.appendChild(host);
    

    View Slide

16. DEMO
    

    View Slide

17. Custom Elements
    

    View Slide

18. const supportsCustomElements = 'customElements' in window;
    

    View Slide

19. class AweElement extends HTMLElement {...}
    window.customElements.define('awe-element', AppDrawer);
    

    View Slide

20. window.customElements.define('awe-element',
    class extends HTMLElement {...});
    

    View Slide

21. class AweElement extends HTMLElement {
    constructor() {
    super(); // Don't forget
    ...
    }
    connectedCallback() {
    ...
    }
    disconnectedCallback() {
    ...
    }
    attributeChangedCallback(attrName, oldVal, newVal) {
    ...
    }
    }
    

    View Slide

22. View Slide

23. DEMO
    

    View Slide

24. View Slide

25. View Slide

26. h3manth.com
    @gnumanth
    

    View Slide

27. View Slide