Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components v1

Web Components v1

Quick intro to Web Components v1

hemanth.hm

April 13, 2017
Tweet

More Decks by hemanth.hm

Other Decks in Programming

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