iamphill/index.html

## index.html
<style>
trello-board {
  display: block;
  height: 100%;
}
</style>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<script id="trello-board" type="text/x-handlebars-template">
  <style>
    trello-list {
      display: inline-block;
      margin-right: 15px;
      width: 250px;
      height: 100%;
      vertical-align: top;
    }
    trello-list:last-child {
      margin-right: 0;
    }
  </style>
    {{#each lists}}
      <trello-list list-name="{{ name }}" list-id="{{ id }}"></trello-list>
    {{/each}}
</script>
<script id="trello-board-list" type="text/x-handlebars-template">
  <style>
    trello-card {
      display: block;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    h5 {
      flex: 0 0 auto;
    }
    .cards {
      flex: 1 1 auto;
      height: 100%;
      overflow: scroll;
    }
  </style>
  <div class="container">
    <h5>{{ name }}</h5>
    <div class="cards">
      {{#each cards}}
        <trello-card data="{{ json this }}"></trello-card>
      {{/each}}
    </div>
  </div>
</script>
<script id="trello-card" type="text/x-handlebars-template">
  <style>
  trello-card-attachment {
    display: block;
    min-height: 80px;
    margin-bottom: 10px;
  }
  .labels {
    display: block;
    margin-bottom: 10px;
  }
  trello-label {
    display: inline-block;
  }
  </style>
  {{#if idAttachmentCover}}
    <trello-card-attachment card-id="{{ shortLink }}" attachment-id="{{ idAttachmentCover }}"></trello-card-attachment>
  {{/if}}
  {{#if labels}}
    <div class="labels">
      {{#each labels}}
        <trello-label label-name="{{ name }}" label-color="{{ color }}"></trello-label>
      {{/each}}
    </div>
  {{/if}}
  {{ name }}
</script>
<script id="trello-card-attachment" type="text/x-handlebars-template">
  <style>
    .image {
      height: 80px;
      width: 100%;
      background-size: cover;
    }
  </style>
  <div class="image" style="background-image: url({{ url }})"></div>
</script>
<script id="trello-label" type="text/x-handlebars-template">
  <style>
  span {
    display: block;
    height: 8px;
    width: 40px;
    border-radius: 3px;
  }
  </style>
  <span title="{{ name }}" style="background-color: {{ color }}"></span>
</script>
<body>
  <script src="test.js"></script>
  <trello-board board-id="AQ3KOLDu"></trello-board>
</body>

## test.js
Handlebars.registerHelper('json', function(context) {
  return JSON.stringify(context);
});

var boardProto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#trello-board');
      this.template = Handlebars.compile(t.innerHTML);

      var req = new XMLHttpRequest();
      req.open('get', 'https://api.trello.com/1/boards/' + this.getAttribute('board-id') + '?lists=open', true);
      req.onload = (function () {
        var json = JSON.parse(req.responseText);
        this.createShadowRoot().innerHTML = this.template(json);
      }).bind(this);
      req.send();
    }
  },
  attachedCallback: {
    value: function () {
    }
  }
});
document.registerElement('trello-board', {
  prototype: boardProto
});

var listProto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#trello-board-list');
      this.template = Handlebars.compile(t.innerHTML);

      this.data = {
        id: this.getAttribute('list-id'),
        name: this.getAttribute('list-name'),
        cards: []
      };

      this.createShadowRoot().innerHTML = this.template(this.data);

      this.sendRequest();
    }
  },
  sendRequest: {
    value: function () {
      var req = new XMLHttpRequest();
      req.open('GET', 'https://api.trello.com/1/lists/' + this.data.id + '?fields=labels&cards=open', true);
      req.onload = (function () {
        var json = JSON.parse(req.responseText);
        this.data.cards = json.cards;
        this.shadowRoot.innerHTML = this.template(this.data);
      }).bind(this);
      req.send();
    }
  }
});
document.registerElement('trello-list', {
  prototype: listProto
});

var cardProto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#trello-card');
      this.template = Handlebars.compile(t.innerHTML);

      this.data = JSON.parse(this.getAttribute('data'));

      this.createShadowRoot().innerHTML = this.template(this.data);
    }
  }
});
document.registerElement('trello-card', {
  prototype: cardProto
});

var cardAttachmentProto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#trello-card-attachment');
      this.template = Handlebars.compile(t.innerHTML);
      var id = this.getAttribute('card-id');
      var attachmentId = this.getAttribute('attachment-id');

      var req = new XMLHttpRequest();
      req.open('GET', 'https://api.trello.com/1/cards/' + id + '/attachments/' + attachmentId, true);
      req.onload = (function () {
        var json = JSON.parse(req.responseText);
        this.createShadowRoot().innerHTML = this.template(json);
      }).bind(this);
      req.send();
    }
  }
});
document.registerElement('trello-card-attachment', {
  prototype: cardAttachmentProto
});

var labelProto = Object.create(HTMLElement.prototype, {
  createdCallback: {
    value: function() {
      var t = document.querySelector('#trello-label');
      this.template = Handlebars.compile(t.innerHTML);

      this.data = {
        name: this.getAttribute('label-name'),
        color: this.getAttribute('label-color')
      };

      this.createShadowRoot().innerHTML = this.template(this.data);
    }
  }
});
document.registerElement('trello-label', {
  prototype: labelProto
});
	<style>
	trello-board {
	display: block;
	height: 100%;
	}
	</style>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
	<script id="trello-board" type="text/x-handlebars-template">
	<style>
	trello-list {
	display: inline-block;
	margin-right: 15px;
	width: 250px;
	height: 100%;
	vertical-align: top;
	}
	trello-list:last-child {
	margin-right: 0;
	}
	</style>
	{{#each lists}}
	<trello-list list-name="{{ name }}" list-id="{{ id }}"></trello-list>
	{{/each}}
	</script>
	<script id="trello-board-list" type="text/x-handlebars-template">
	<style>
	trello-card {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	}
	.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	}
	h5 {
	flex: 0 0 auto;
	}
	.cards {
	flex: 1 1 auto;
	height: 100%;
	overflow: scroll;
	}
	</style>
	<div class="container">
	<h5>{{ name }}</h5>
	<div class="cards">
	{{#each cards}}
	<trello-card data="{{ json this }}"></trello-card>
	{{/each}}
	</div>
	</div>
	</script>
	<script id="trello-card" type="text/x-handlebars-template">
	<style>
	trello-card-attachment {
	display: block;
	min-height: 80px;
	margin-bottom: 10px;
	}
	.labels {
	display: block;
	margin-bottom: 10px;
	}
	trello-label {
	display: inline-block;
	}
	</style>
	{{#if idAttachmentCover}}
	<trello-card-attachment card-id="{{ shortLink }}" attachment-id="{{ idAttachmentCover }}"></trello-card-attachment>
	{{/if}}
	{{#if labels}}
	<div class="labels">
	{{#each labels}}
	<trello-label label-name="{{ name }}" label-color="{{ color }}"></trello-label>
	{{/each}}
	</div>
	{{/if}}
	{{ name }}
	</script>
	<script id="trello-card-attachment" type="text/x-handlebars-template">
	<style>
	.image {
	height: 80px;
	width: 100%;
	background-size: cover;
	}
	</style>
	<div class="image" style="background-image: url({{ url }})"></div>
	</script>
	<script id="trello-label" type="text/x-handlebars-template">
	<style>
	span {
	display: block;
	height: 8px;
	width: 40px;
	border-radius: 3px;
	}
	</style>
	<span title="{{ name }}" style="background-color: {{ color }}"></span>
	</script>
	<body>
	<script src="test.js"></script>
	<trello-board board-id="AQ3KOLDu"></trello-board>
	</body>
	Handlebars.registerHelper('json', function(context) {
	return JSON.stringify(context);
	});

	var boardProto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#trello-board');
	this.template = Handlebars.compile(t.innerHTML);

	var req = new XMLHttpRequest();
	req.open('get', 'https://api.trello.com/1/boards/' + this.getAttribute('board-id') + '?lists=open', true);
	req.onload = (function () {
	var json = JSON.parse(req.responseText);
	this.createShadowRoot().innerHTML = this.template(json);
	}).bind(this);
	req.send();
	}
	},
	attachedCallback: {
	value: function () {
	}
	}
	});
	document.registerElement('trello-board', {
	prototype: boardProto
	});

	var listProto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#trello-board-list');
	this.template = Handlebars.compile(t.innerHTML);

	this.data = {
	id: this.getAttribute('list-id'),
	name: this.getAttribute('list-name'),
	cards: []
	};

	this.createShadowRoot().innerHTML = this.template(this.data);

	this.sendRequest();
	}
	},
	sendRequest: {
	value: function () {
	var req = new XMLHttpRequest();
	req.open('GET', 'https://api.trello.com/1/lists/' + this.data.id + '?fields=labels&cards=open', true);
	req.onload = (function () {
	var json = JSON.parse(req.responseText);
	this.data.cards = json.cards;
	this.shadowRoot.innerHTML = this.template(this.data);
	}).bind(this);
	req.send();
	}
	}
	});
	document.registerElement('trello-list', {
	prototype: listProto
	});

	var cardProto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#trello-card');
	this.template = Handlebars.compile(t.innerHTML);

	this.data = JSON.parse(this.getAttribute('data'));

	this.createShadowRoot().innerHTML = this.template(this.data);
	}
	}
	});
	document.registerElement('trello-card', {
	prototype: cardProto
	});

	var cardAttachmentProto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#trello-card-attachment');
	this.template = Handlebars.compile(t.innerHTML);
	var id = this.getAttribute('card-id');
	var attachmentId = this.getAttribute('attachment-id');

	var req = new XMLHttpRequest();
	req.open('GET', 'https://api.trello.com/1/cards/' + id + '/attachments/' + attachmentId, true);
	req.onload = (function () {
	var json = JSON.parse(req.responseText);
	this.createShadowRoot().innerHTML = this.template(json);
	}).bind(this);
	req.send();
	}
	}
	});
	document.registerElement('trello-card-attachment', {
	prototype: cardAttachmentProto
	});

	var labelProto = Object.create(HTMLElement.prototype, {
	createdCallback: {
	value: function() {
	var t = document.querySelector('#trello-label');
	this.template = Handlebars.compile(t.innerHTML);

	this.data = {
	name: this.getAttribute('label-name'),
	color: this.getAttribute('label-color')
	};

	this.createShadowRoot().innerHTML = this.template(this.data);
	}
	}
	});
	document.registerElement('trello-label', {
	prototype: labelProto
	});