rytmis/app.html

## app.html
<template>
  <require from="./parent-element"></require>

  <h1>${message}</h1>

  <parent-element />
</template>

## app.js
export class App {
  message = 'Hello World!';
}

## child-element.html
<template>
  <div ref="theRef">I am in a child element.</div>
  <button click.delegate="show()">Display child ref content:</button> <span>${childRefContent}</span>
</template>

## child-element.js
import { customElement, processContent } from "aurelia-framework"

@customElement('child-element')
@processContent((_, __, ___, instruction) => {
  instruction.inheritBindingContext = true;
  return true;
})
export class ChildElement {
 set theRef(value) {
   this._ref = value;
 }
 show() {
   this.childRefContent = this._ref.innerText;
 }
}

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

## parent-element.html
<template bindable="model, view">
  <require from="./child-element"></require>
  <div ref="theRef">I am in a parent element.</div>
  <button click.delegate="show()">Display parent ref content:</button> <span>${parentRefContent}</span>

  <child-element />
</template>

## parent-element.js
import { customElement, processContent } from "aurelia-framework"

@customElement('parent-element')
export class ParentElement {
 set theRef(value) {
   this._ref = value;
 }
 show() {
   this.parentRefContent = this._ref.innerText;
 }
}
	<template>
	<require from="./parent-element"></require>

	<h1>${message}</h1>

	<parent-element />
	</template>
	<template>
	<div ref="theRef">I am in a child element.</div>
	<button click.delegate="show()">Display child ref content:</button> <span>${childRefContent}</span>
	</template>
	import { customElement, processContent } from "aurelia-framework"

	@customElement('child-element')
	@processContent((_, __, ___, instruction) => {
	instruction.inheritBindingContext = true;
	return true;
	})
	export class ChildElement {
	set theRef(value) {
	this._ref = value;
	}
	show() {
	this.childRefContent = this._ref.innerText;
	}
	}
	<!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="model, view">
	<require from="./child-element"></require>
	<div ref="theRef">I am in a parent element.</div>
	<button click.delegate="show()">Display parent ref content:</button> <span>${parentRefContent}</span>

	<child-element />
	</template>
	import { customElement, processContent } from "aurelia-framework"

	@customElement('parent-element')
	export class ParentElement {
	set theRef(value) {
	this._ref = value;
	}
	show() {
	this.parentRefContent = this._ref.innerText;
	}
	}