AquilaSands/app.html

## app.html
<template>
  <require from="./outer"></require>
  <require from="./inner"></require>
  <h1>${message}</h1>
  <outer><inner></inner></outer>
</template>

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

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

## inner.css
.inner {
  height: 100%;
  width: 100px;
  background-color: #efefef;
  border: 1px solid blue;
  margin: 0 auto;
}

## inner.html
<template>
  <require from="./inner.css"></require>
  <div class="inner" click.delegate="innerClick($event)">
    <p>Inner content</p>
    <a href="https://www.google.co.uk" target="_blank" rel="noreferrer noopener">Google</a>
  </div>
</template>

## inner.js
export class Inner {

  innerClick = (evt) => {
      if (evt.target instanceof HTMLAnchorElement) {
        // allow hyperlink
         console.log("inner propagation stopped");
          evt.stopPropagation();
          return true;
      } else {
        // do default card action
        console.log("inner click allowed");
      }
  }
}

## outer.css
.outer {
  height: 250px;
  width: 400px;
  background-color: #ababab;
  border: 1px solid red;
}

## outer.html
<template>
  <require from="./outer.css"></require>
  <div class="outer" click.capture="outerClick($event)">
    <slot></slot>
  </div>
</template>

## outer.js
export class Outer {

  outerClick = (evt) => {
    console.log("outer clicked");
    //return true; // uncomment to allow link navigation
  }
}
	<template>
	<require from="./outer"></require>
	<require from="./inner"></require>
	<h1>${message}</h1>
	<outer><inner></inner></outer>
	</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>
	.inner {
	height: 100%;
	width: 100px;
	background-color: #efefef;
	border: 1px solid blue;
	margin: 0 auto;
	}
	<template>
	<require from="./inner.css"></require>
	<div class="inner" click.delegate="innerClick($event)">
	<p>Inner content</p>
	<a href="https://www.google.co.uk" target="_blank" rel="noreferrer noopener">Google</a>
	</div>
	</template>
	export class Inner {

	innerClick = (evt) => {
	if (evt.target instanceof HTMLAnchorElement) {
	// allow hyperlink
	console.log("inner propagation stopped");
	evt.stopPropagation();
	return true;
	} else {
	// do default card action
	console.log("inner click allowed");
	}
	}
	}
	.outer {
	height: 250px;
	width: 400px;
	background-color: #ababab;
	border: 1px solid red;
	}
	<template>
	<require from="./outer.css"></require>
	<div class="outer" click.capture="outerClick($event)">
	<slot></slot>
	</div>
	</template>
	export class Outer {

	outerClick = (evt) => {
	console.log("outer clicked");
	//return true; // uncomment to allow link navigation
	}
	}