Tweet
Tweet

Slide 1

Slide 1 text

Web Componentes

Slide 2

Slide 2 text

· tag · HTML imports · Shadow DOM · Custom Elements

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

DEMO

Slide 7

Slide 7 text

HTML imports

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

const aweDoc = document.currentScript.ownerDocument;

Slide 12

Slide 12 text

DEMO

Slide 13

Slide 13 text

Shadow DOM

Slide 14

Slide 14 text

const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow;

Slide 15

Slide 15 text

const host = document.body.createShadowRoot(); host.innerHTML = "

I'm a shadow dom!

"; document.appendChild(host);

Slide 16

Slide 16 text

DEMO

Slide 17

Slide 17 text

Custom Elements

Slide 18

Slide 18 text

const supportsCustomElements = 'customElements' in window;

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

DEMO

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

h3manth.com @gnumanth

Slide 27

Slide 27 text

No content