ZoolWay/comp3.html

## comp3.html
<template>
  <p style="border: 1px solid purple; padding: 1rem;">Comp3: ${myVar}</p>
</template>

## comp3.js
import { useView } from 'aurelia-framework';

console.debug('Comp3 module loaded');

@useView('./comp3.html!gate')
export class Comp3 {
  myVar = 'Hello from Comp3, my number is: ' + Math.floor((Math.random() * 100) + 1);
}

## ext-styles.css
body {
  font-size: 14pt
  font-color: blue;
}

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" type="text/css" href="ext-styles.css">
</head>
<body>
  <p>This gist exists so that <a href="https://gist.run/?id=39e6fdacefc9e5c69b42a5e8c9049384" target="_blank">https://gist.run/?id=39e6fdacefc9e5c69b42a5e8c9049384</a> can run its comp3 as external component</p>
  <script src="./script.js"></script>
</body>
</html>

## script.js
console.info('Hello World!');
	<template>
	<p style="border: 1px solid purple; padding: 1rem;">Comp3: ${myVar}</p>
	</template>
	import { useView } from 'aurelia-framework';

	console.debug('Comp3 module loaded');

	@useView('./comp3.html!gate')
	export class Comp3 {
	myVar = 'Hello from Comp3, my number is: ' + Math.floor((Math.random() * 100) + 1);
	}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" type="text/css" href="ext-styles.css">
	</head>
	<body>
	<p>This gist exists so that <a href="https://gist.run/?id=39e6fdacefc9e5c69b42a5e8c9049384" target="_blank">https://gist.run/?id=39e6fdacefc9e5c69b42a5e8c9049384</a> can run its comp3 as external component</p>
	<script src="./script.js"></script>
	</body>
	</html>