Web Components

web-components.md

Web Components

• http://html5-demos.appspot.com/static/webcomponents/index.html#1
• http://www.w3.org/TR/2013/WD-components-intro-20130606/

Define a declarative "API" using insertion points:

<element name="my-tabs" constructor="TabsController">
  <template>
    <style>...</style>
    <content select="hgroup:first-child"></content>
  </template>
  <script>
    TabsController.prototype = {
      doSomething: function() { ... }
    };
  </script>
</element>

Include and use it:

<my-tabs>
  <hgroup>
    <h2>Title</h2>
    ...
  </hgroup>
</my-tabs>

Declared constructor goes on global scope:

<script>
  var tabs = new TabsController();
  tabs.addEventListener('click', function(e) {
    e.target.doSomething();
  });
  document.body.appendChild(tabs);
</script>