ccamarat/app.html

## app.html
<template>
 <require from="./table-head-normal.html"></require>
 <require from="./table-head-aurelia.html"></require>

  This is the "normal" way of looping. Note that it doesn't work in Aurelia:
  <table>
    <thead as-element="table-head-normal" headings.bind="headings"></thead>
  </table>

  <hr />

  It will work if you elect to not DRY up your code, but this isn't really desirable:
  <table>
    <thead>
      <tr>
        <th repeat.for="heading of headings">${heading}</th>
      </tr>
    </thead>
  </table>


  <hr />

  So, what you need to do is wrap your TH in a `template` and put the looping directive on it instead:
  <table>
    <thead as-element="table-head-aurelia" headings.bind="headings"></thead>
  </table>

</template>

## app.js
export class App {
  constructor () {
    this.headings = ['Id', 'Stain', 'Comment', 'Status', 'Date Created'];
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## table-head-aurelia.html
<template bindable="headings">
  <require from="table-head.css"></require>

  <tr>
    <template repeat.for="heading of headings">
      <th>${heading}</th>
    </template>
  </tr>
</template>

## table-head-normal.html
<template bindable="headings">
  <require from="table-head.css"></require>

  <tr>
    <th repeat.for="heading of headings">${heading}</th>
  </tr>
</template>

## table-head.css
/* Obviously this would be scoped better */
th {
  font-style: italic;
  padding: 10px;
}
	<template>
	<require from="./table-head-normal.html"></require>
	<require from="./table-head-aurelia.html"></require>

	This is the "normal" way of looping. Note that it doesn't work in Aurelia:
	<table>
	<thead as-element="table-head-normal" headings.bind="headings"></thead>
	</table>

	<hr />

	It will work if you elect to not DRY up your code, but this isn't really desirable:
	<table>
	<thead>
	<tr>
	<th repeat.for="heading of headings">${heading}</th>
	</tr>
	</thead>
	</table>


	<hr />

	So, what you need to do is wrap your TH in a `template` and put the looping directive on it instead:
	<table>
	<thead as-element="table-head-aurelia" headings.bind="headings"></thead>
	</table>

	</template>
	export class App {
	constructor () {
	this.headings = ['Id', 'Stain', 'Comment', 'Status', 'Date Created'];
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template bindable="headings">
	<require from="table-head.css"></require>

	<tr>
	<template repeat.for="heading of headings">
	<th>${heading}</th>
	</template>
	</tr>
	</template>
	/* Obviously this would be scoped better */
	th {
	font-style: italic;
	padding: 10px;
	}