jdanyow/app.html

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

  <myelem name.bind="'outer'">
    <h3>inside myelem</h3>
    <myelem name.bind="'inner'">
      <h4>inside inside ... </h4>
    </myelem>
  </myelem>
</template>

## app.js
export class App {
}

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

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(a => a.setRoot());
}

## myelem.js
import {
  customElement,
  inlineView,
  bindable,
  inject
} from 'aurelia-framework';

import {OptionalParent} from './optional-parent';

@inject(OptionalParent.of(MyElem))
@customElement("myelem")
@inlineView("<template><content></content></template>")
export class MyElem {
  @bindable name;

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

  bind(bindingContext) {
    console.log(`My name is "${this.name}".`);
    console.log('My bindingContext is:');
    console.log(bindingContext);
    console.log('My parent is:');
    console.log(this.parent);
  }
}

## optional-parent.js
import {resolver} from 'aurelia-dependency-injection';

@resolver()
export class OptionalParent {
  constructor(key) {
    this.key = key;
  }

  get(container) {
    if (container.parent && container.parent.hasResolver(this.key, false)) {
      return container.parent.get(this.key)
    }
    return null;
  }

  static of(key) {
    return new OptionalParent(key);
  }
}
	<template>
	<require from="myelem"></require>

	<myelem name.bind="'outer'">
	<h3>inside myelem</h3>
	<myelem name.bind="'inner'">
	<h4>inside inside ... </h4>
	</myelem>
	</myelem>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link rel="stylesheet" href="styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(a => a.setRoot());
	}
	import {
	customElement,
	inlineView,
	bindable,
	inject
	} from 'aurelia-framework';

	import {OptionalParent} from './optional-parent';

	@inject(OptionalParent.of(MyElem))
	@customElement("myelem")
	@inlineView("<template><content></content></template>")
	export class MyElem {
	@bindable name;

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

	bind(bindingContext) {
	console.log(`My name is "${this.name}".`);
	console.log('My bindingContext is:');
	console.log(bindingContext);
	console.log('My parent is:');
	console.log(this.parent);
	}
	}
	import {resolver} from 'aurelia-dependency-injection';

	@resolver()
	export class OptionalParent {
	constructor(key) {
	this.key = key;
	}

	get(container) {
	if (container.parent && container.parent.hasResolver(this.key, false)) {
	return container.parent.get(this.key)
	}
	return null;
	}

	static of(key) {
	return new OptionalParent(key);
	}
	}