Skip to content

Instantly share code, notes, and snippets.

@michaelnero
Created March 22, 2022 09:16
Show Gist options
  • Save michaelnero/018dd79b7b043b8f99403c735dcaa04f to your computer and use it in GitHub Desktop.
Save michaelnero/018dd79b7b043b8f99403c735dcaa04f to your computer and use it in GitHub Desktop.
local-template-custom-element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.ts.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>
{
"dependencies": {
"aurelia": "latest"
}
}
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
Aurelia.app(MyApp).start();
<import from="./solid-icon"></import>
<h1>${message}</h1>
<solid-icon></solid-icon>
<person-info></person-info>
<template as-custom-element="person-info">
<!-- I added the following import to attempt to fix this, but removing it has no affect -->
<import from="./solid-icon"></import>
<p>Hello from a custom template</p>
<solid-icon></solid-icon>
</template>
export class MyApp {
public message: string = 'Hello Aurelia 2!';
}
export class SolidIcon {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment