opcodewriter/app.html

## app.html
<template>

  <require from='dynamic-header'></require>
  <dynamic-header containerless></dynamic-header>

</template>

## app.js


export class App {


}

## dynamic-header.html
<template>
  <require from="outerHtmlAttribute"></require>
  <!--<span innerhtml.bind="innerHtml()"> </span>-->
  <h1 outer-html.bind="level">HELLO</h1>
</template>

## dynamic-header.js
import {bindable, inject} from 'aurelia-framework';

@inject(Element)
export class DynamicHeader {

   @bindable level = "1";

   /*innerHtml()
   {
     return `<h${this.level}>Header 1</h${this.level}>`;
   }*/

   constructor(element)
   {
     this.element = element;
   }
}

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

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## outerHtmlAttribute.js

import {inject, customAttribute} from 'aurelia-framework';

@customAttribute('outer-html')
@inject(Element)
export class OuterHtmlAttribute {
  constructor(element) {
    this.element = element;
  }

  valueChanged(newValue, oldValue) {
    this.element.outerHTML = `<h${newValue}>${this.element.innerHTML}</h${newValue}>`;
  }
}


## styles.css
a {
  display: block;
}

a:link {
    color: black;
    text-decoration: none;
}

.collection-item
{
  background: lightgray;
}

/* since you set background property on .collection-item, this style must come after .collection-item otherwise it's not applied */
.active {
  background: blue;
}
	<template>

	<require from='dynamic-header'></require>
	<dynamic-header containerless></dynamic-header>

	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>

	import {inject, customAttribute} from 'aurelia-framework';

	@customAttribute('outer-html')
	@inject(Element)
	export class OuterHtmlAttribute {
	constructor(element) {
	this.element = element;
	}

	valueChanged(newValue, oldValue) {
	this.element.outerHTML = `<h${newValue}>${this.element.innerHTML}</h${newValue}>`;
	}
	}
	a {
	display: block;
	}

	a:link {
	color: black;
	text-decoration: none;
	}

	.collection-item
	{
	background: lightgray;
	}

	/* since you set background property on .collection-item, this style must come after .collection-item otherwise it's not applied */
	.active {
	background: blue;
	}