Web Components v1 Libraries

@laco0416

Web Components v1

  • Custom Elements v1
  • Shadow DOM v1
  • HTML Imports
  • Template
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

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

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

Links

Made with Slides.com