AStoker

<template>
  <require from="./inline-svg"></require>
  <style>
    .cool {
      fill: red;
    }
    .worked {
      fill: blue;
    }
  </style>

AStoker

<template>
  <require from="./pagerCustomElement"></require>
  <pager items.bind="tracks">
    <div slot="title-template">Some song</div>
    <div slot="content-template">
      <div repeat.for="line of item.content">
        Line: ${$index + 1}. ${line.lyric}
      </div>
    </div>
  </pager>

AStoker

<template>
  <require from="./customListCustomElement"></require>
  <custom-list items.bind="tracks">
    <div slot="title-template">Some song</div>
    <div slot="content-template">
      <div repeat.for="line of item.content">
        Line: ${$index + 1}. ${line.lyric}
      </div>
    </div>

AStoker

<template>
  <require from="./customListCustomElement"></require>

  <custom-list items.bind="tracks">
    <template replace-part="title-override">Nothing to see here</template>
  </custom-list>
</template>

AStoker

<template>
  <require from="./switch"></require>
  <span>${toggleState}</span><br />
  <label for="toggle">Toggle: </label>
  <switch id="toggle" value.bind="toggleState" />
</template>

AStoker

<template>
  <require from="./switch"></require>
  <span>${toggleState}</span><br />
  <label for="toggle">Toggle: </label>
  <switch id="toggle" value.bind="toggleState"></switch>
</template>

AStoker

<template>
  <require from="./switch"></require>
  <span>${toggleState}</span><br />
  <label for="toggle">Toggle: </label>
  <switch id="toggle" value.bind="toggleState"></switch>
</template>

AStoker

<template>
    <div>Stuff here</div>
    <button click.delegate="loadm1($event)">Load M1</button>
        <button click.delegate="loadm2($event)">Load M2</button>
        <button click.delegate="loadm2again($event)">Load Another M2</button>
    <div id="m1holder"></div>
    <div id="m2holder"></div>
    <div id="m2holderagain"></div>
</template>

AStoker

<template>
  <label>Debounce: ${debounce}</label>
  <br />
  <input value.bind="inputValue & debounce: debounce" />
  <span>: ${inputValue}</span>
  <br />
  <button click.delegate="toggleDebounceLength()">Toggle Debounce Length</button>
</template>

AStoker

<template>
  <require from="CustomElement2"></require>
  <label>Custom Element 1</label>
  <br />
  <input value.bind="query" />
  <br />
  <custom-element2 items.bind="items2">
    <template replace-part="item">
      <li repeat.for="item of items">
        <label click.delegate="select(item, $event)">