Web Components v1

Quick intro to Web Components v1

Transcript

1. Web Componentes
2. · <template> tag · HTML imports · Shadow DOM · Custom Elements
3. <template>
4. 'content' in document.createElement('template');
5. Activating <template>: var t = document.querySelector('#aweTemplate'); var clone = document.importNode(t.content, true); document.body.appendChild(clone);
6. DEMO
7. HTML imports
8. 'import' in document.createElement('link');
9. <link rel="import" href="/imports/aweTemplate.html"> <link rel="import" href="/imports/aweTemplate.html" onload="handleLoad(event)" onerror="handleError(event)">
10. const link = document.querySelector('link[rel=import]'); const xkcd = link.import; // Access DOM of the document in aweTemplate const cartoon = xkcd.querySelector('img');
11. const aweDoc = document.currentScript.ownerDocument;
12. DEMO
13. Shadow DOM
14. const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;
15. const host = document.body.createShadowRoot(); host.innerHTML = "<p>I'm a <em>shadow</em> dom!</p>"; document.appendChild(host);
16. DEMO
17. Custom Elements
18. const supportsCustomElements = 'customElements' in window;
19. class AweElement extends HTMLElement {...} window.customElements.define('awe-element', AppDrawer);
20. window.customElements.define('awe-element', class extends HTMLElement {...});
21. class AweElement extends HTMLElement { constructor() { super(); // Don't forget ... } connectedCallback() { ... } disconnectedCallback() { ... } attributeChangedCallback(attrName, oldVal, newVal) { ... } }
23. DEMO
26. h3manth.com @gnumanth