Web Components v1 Libraries

@laco0416

Web Components v1

• Custom Elements v1
• Shadow DOM v1
• HTML Imports
• Template

github.com/w3c/webcomponents

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define("my-element", MyElement);

Custom Elements v1

const container = document.getElementById('shadow-container');
container.attachShadow({mode: 'open'});

Shadow DOM v1

Libraries

• Polymer (v2)
• SkateJS

Polymer v2

Polymer 2.0 Preview

class MyElement extends Polymer.Element {
  static get is() { return ‘my-element’; }

  static get config() {
    properties: {
      //the properties you know and love from Polymer
    },
    observers: [
      //the observers you know and love from Polymer
    ]
  }

  constructor() {
    super();
    …
  }
}

customElements.define(MyElement.is, MyElement);

• Web Components
• HTML Template
• {{binding}}

SkateJS

http://skate.js.org/

skate.define('x-counter', {
  props: {
    count: skate.prop.number(),
  },
  attached(elem) {
    elem.__ival = setInterval(() => ++elem.count, 1000);
  },
  detached(elem) {
    clearInterval(elem.__ival);
  },
  render(elem) {
    return <span>Count: {elem.count}</span>;
  },
});

• Web Components
• Incremental DOM
• JSX

• w3c/webcomponents
• http://hayato.io/2016/shadowdomv1/
• Polymer 2.0
• Polymer/polymer#2.0-preview
• SkateJS
• skatejs-web-component.js

Links