mttmccb/app.html

## app.html
<template>
  <require from="./man-with-no-name"></require>
  <require from="./western-extra"></require>

  <man-with-no-name>Sometimes the dead can be more useful than the living.</man-with-no-name>

  <western-extra>
    <h1 slot="outfit">dead man's shoes</h1>
    <h2 slot="weapon">rifle</h2>
  </western-extra>
</template>

## app.js
export class App { }

## 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>

## man-with-no-name.css
.ManWithNoName {
  border: 1px solid lightslategray;
  border-radius: 1rem;
  display: block;
  padding: 1rem;
  margin-bottom: 1rem;
}

## man-with-no-name.html
<template class="ManWithNoName">
  <require from="man-with-no-name.css"></require>
  <slot></slot>
</template>

## man-with-no-name.js
export class ManWithNoName { }

## western-extra.css
.WesternExtra {
  border: 1px solid lightslategray;
  border-radius: 1rem;
  display: block;
  overflow: hidden;
  margin-bottom: 1rem;
}

.WesternExtra-outfit {
  background-color: darkgoldenrod;
  border-bottom: 1px solid lightslategray;
  color: white;
  padding: 1rem;
}

.WesternExtra-weapon {
  background-color: lightsteelblue;
  padding: 1rem;
}

## western-extra.html
<template class="WesternExtra">
  <require from="western-extra.css"></require>
  <header class="WesternExtra-outfit">
    <slot name="outfit"></slot>
  </header>
  <section class="WesternExtra-weapon">
    <slot name="weapon"></slot>
  </section>
</template>

## western-extra.js
export class WesternExtra { }
	<template>
	<require from="./man-with-no-name"></require>
	<require from="./western-extra"></require>

	<man-with-no-name>Sometimes the dead can be more useful than the living.</man-with-no-name>

	<western-extra>
	<h1 slot="outfit">dead man's shoes</h1>
	<h2 slot="weapon">rifle</h2>
	</western-extra>
	</template>
	<!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>
	.ManWithNoName {
	border: 1px solid lightslategray;
	border-radius: 1rem;
	display: block;
	padding: 1rem;
	margin-bottom: 1rem;
	}
	<template class="ManWithNoName">
	<require from="man-with-no-name.css"></require>
	<slot></slot>
	</template>
	.WesternExtra {
	border: 1px solid lightslategray;
	border-radius: 1rem;
	display: block;
	overflow: hidden;
	margin-bottom: 1rem;
	}

	.WesternExtra-outfit {
	background-color: darkgoldenrod;
	border-bottom: 1px solid lightslategray;
	color: white;
	padding: 1rem;
	}

	.WesternExtra-weapon {
	background-color: lightsteelblue;
	padding: 1rem;
	}
	<template class="WesternExtra">
	<require from="western-extra.css"></require>
	<header class="WesternExtra-outfit">
	<slot name="outfit"></slot>
	</header>
	<section class="WesternExtra-weapon">
	<slot name="weapon"></slot>
	</section>
	</template>