opcodewriter/app.html

## app.html
<template>
  <require from="./contentControl.html"></require>
  <require from="./myCustomComponent"></require>

  <content-control content-template='myCustomTemplate.html' content='this is content rendered with myCustomTemplate'></content-control>

  <!-- set a template of a another component-->
  <!--<content-control content-template='myCustomComponent' content='this doesnt matter'></content-control> -->

  <!-- set actual content with an instance of another component-->
  <content-control>
    <my-custom-component text="Hello"></my-custom-component>
  </content-control>
</template>


## app.js
export class App {


}

## contentControl.html
<template bindable='content,contentTemplate'>
  <compose if.bind='contentTemplate' view='${contentTemplate}' containerless></compose>

  <!-- how to make this containerless too? -->
  <div if.bind='!contentTemplate'>
    ${content}
  </div>
  <content></content>
</template>

## contentControl.js
import {bindable} from 'aurelia-framework';

export class ContentControl
{
  @bindable content;
  @bindable contentTemplate;
}

## 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/master/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/master/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## myCustomComponent.html
<template>
  <button>${text}</button>
</template>

## myCustomComponent.js
import {bindable} from 'aurelia-framework'

export class MyCustomComponent
{
  @bindable text;
}

## myCustomTemplate.html
<template>
  <div style="background:lightblue">${content}</div>
</template>

## 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="./contentControl.html"></require>
	<require from="./myCustomComponent"></require>

	<content-control content-template='myCustomTemplate.html' content='this is content rendered with myCustomTemplate'></content-control>

	<!-- set a template of a another component-->
	<!--<content-control content-template='myCustomComponent' content='this doesnt matter'></content-control> -->

	<!-- set actual content with an instance of another component-->
	<content-control>
	<my-custom-component text="Hello"></my-custom-component>
	</content-control>
	</template>
	<template bindable='content,contentTemplate'>
	<compose if.bind='contentTemplate' view='${contentTemplate}' containerless></compose>

	<!-- how to make this containerless too? -->
	<div if.bind='!contentTemplate'>
	${content}
	</div>
	<content></content>
	</template>
	import {bindable} from 'aurelia-framework';

	export class ContentControl
	{
	@bindable content;
	@bindable contentTemplate;
	}
	<!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/master/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/master/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	import {bindable} from 'aurelia-framework'

	export class MyCustomComponent
	{
	@bindable text;
	}
	<template>
	<div style="background:lightblue">${content}</div>
	</template>
	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;
	}