bigopon · June 2, 2021 06:43 · Mar 11, 2021 · Mar 11, 2021 · Mar 11, 2021 · Mar 10, 2021
diff --git a/src\custom-element-a.html b/src\custom-element-a.html
@@ -0,0 +1 @@
+<div style="color: red; border: 1px solid red">This is custom element A</div>
diff --git a/src\custom-element-a.js b/src\custom-element-a.js
@@ -0,0 +1,6 @@
+import { customElement, bindable } from "aurelia";
+
+import template from "./custom-element-a.html";
+@customElement({ name: "custom-element-a", template })
+export class CustomElementA {
+}
diff --git a/src\custom-element-b.html b/src\custom-element-b.html
@@ -0,0 +1,9 @@
+<import from="./custom-element-a"></import>
+
+<div style="border: 1px solid blue">
+  <div style="color: blue">This is custom element B</div>
+
+  <span>And here should be custom element A:</span>
+  <custom-element-a></custom-element-a>
+  <span>(but it is not rendered)</span>
+</div>
diff --git a/src\custom-element-b.js b/src\custom-element-b.js
@@ -0,0 +1,6 @@
+import { customElement, bindable } from "aurelia";
+
+import template from "./custom-element-b.html";
+@customElement({ name: "custom-element-b", template })
+export class CustomElementB {
+}
diff --git a/src\my-another-custom-element.html b/src\my-another-custom-element.html
@@ -1,9 +0,0 @@
-<import from="./my-custom-element"></import>
-
-<div style="border: 1px solid blue">
-  <div style="color: blue">This is from custom element B</div>
-
-  <span>And here should be custom element A:</span>
-  <my-custom-element></my-custom-element>
-  <span>(but it is not rendered)</span>
-</div>

diff --git a/src\my-another-custom-element.js b/src\my-another-custom-element.js
@@ -1,6 +0,0 @@
-import { customElement, bindable } from "aurelia";
-
-import template from "./my-another-custom-element.html";
-@customElement({ name: "my-another-custom-element", template })
-export class MyAnotherCustomElement {
-}

diff --git a/src\my-app.html b/src\my-app.html
@@ -1,10 +1,10 @@
-<import from="./my-custom-element"></import>
-<import from="./my-another-custom-element"></import>
+<import from="./custom-element-a"></import>
+<import from="./custom-element-b"></import>
 
 <h1>Custom elements</h1>
 
-<h2>Custom element directly under app</h2>
-<my-custom-element></my-custom-element>
+<h2>Custom element A directly under app</h2>
+<custom-element-a></custom-element-a>
 
-<h2>Custom element inside another custom element</h2>
-<my-another-custom-element></my-another-custom-element>
+<h2>Custom element A inside custom element B</h2>
+<custom-element-b></custom-element-b>
diff --git a/src\my-custom-element.html b/src\my-custom-element.html
@@ -1 +0,0 @@
-<div style="color: red; border: 1px solid red">This is from custom element A</div>

diff --git a/src\my-custom-element.js b/src\my-custom-element.js
@@ -1,6 +0,0 @@
-import { customElement, bindable } from "aurelia";
-
-import template from "./my-custom-element.html";
-@customElement({ name: "my-custom-element", template })
-export class MyCustomElement {
-}

diff --git a/src\my-another-custom-element.html b/src\my-another-custom-element.html
@@ -1,9 +1,9 @@
 <import from="./my-custom-element"></import>
 
 <div style="border: 1px solid blue">
-  <div style="color: blue">This is from another custom element</div>
+  <div style="color: blue">This is from custom element B</div>
 
-  <span>And here should be red "my-custom-element" inside "my-another-custom-element":</span>
+  <span>And here should be custom element A:</span>
   <my-custom-element></my-custom-element>
   <span>(but it is not rendered)</span>
 </div>
diff --git a/src\my-custom-element.html b/src\my-custom-element.html
@@ -1 +1 @@
-<div style="color: red; border: 1px solid red">This is from custom element</div>
+<div style="color: red; border: 1px solid red">This is from custom element A</div>
diff --git a/src\my-another-custom-element.html b/src\my-another-custom-element.html
@@ -1,7 +1,9 @@
 <import from="./my-custom-element"></import>
 
-<div style="color: blue">This is from another custom element</div>
+<div style="border: 1px solid blue">
+  <div style="color: blue">This is from another custom element</div>
 
-<span>And here should be red "my-custom-element" inside "my-another-custom-element":</span>
-<my-custom-element></my-custom-element>
-<span>(but it is not rendered)</span>
+  <span>And here should be red "my-custom-element" inside "my-another-custom-element":</span>
+  <my-custom-element></my-custom-element>
+  <span>(but it is not rendered)</span>
+</div>
diff --git a/src\my-custom-element.html b/src\my-custom-element.html
@@ -1 +1 @@
-<div style="color: red">This is from custom element</div>
+<div style="color: red; border: 1px solid red">This is from custom element</div>
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!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.js.
+-->
+<body>
+  <my-app></my-app>
+  <script src="/dist/entry-bundle.js" data-main="main"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "aurelia": "latest"
+  }
+}
diff --git a/src\main.js b/src\main.js
@@ -0,0 +1,4 @@
+import Aurelia from 'aurelia';
+import { MyApp } from './my-app';
+
+Aurelia.app(MyApp).start();
diff --git a/src\my-another-custom-element.html b/src\my-another-custom-element.html
@@ -0,0 +1,7 @@
+<import from="./my-custom-element"></import>
+
+<div style="color: blue">This is from another custom element</div>
+
+<span>And here should be red "my-custom-element" inside "my-another-custom-element":</span>
+<my-custom-element></my-custom-element>
+<span>(but it is not rendered)</span>
diff --git a/src\my-another-custom-element.js b/src\my-another-custom-element.js
@@ -0,0 +1,6 @@
+import { customElement, bindable } from "aurelia";
+
+import template from "./my-another-custom-element.html";
+@customElement({ name: "my-another-custom-element", template })
+export class MyAnotherCustomElement {
+}
diff --git a/src\my-app.html b/src\my-app.html
@@ -0,0 +1,10 @@
+<import from="./my-custom-element"></import>
+<import from="./my-another-custom-element"></import>
+
+<h1>Custom elements</h1>
+
+<h2>Custom element directly under app</h2>
+<my-custom-element></my-custom-element>
+
+<h2>Custom element inside another custom element</h2>
+<my-another-custom-element></my-another-custom-element>
diff --git a/src\my-app.js b/src\my-app.js
@@ -0,0 +1,2 @@
+export class MyApp {
+}
diff --git a/src\my-custom-element.html b/src\my-custom-element.html
@@ -0,0 +1 @@
+<div style="color: red">This is from custom element</div>
diff --git a/src\my-custom-element.js b/src\my-custom-element.js
@@ -0,0 +1,6 @@
+import { customElement, bindable } from "aurelia";
+
+import template from "./my-custom-element.html";
+@customElement({ name: "my-custom-element", template })
+export class MyCustomElement {
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div style="color: red; border: 1px solid red">This is custom element A</div>
Original file line number	Diff line number	Diff line change
		@@ -1 +0,0 @@
		<div style="color: red; border: 1px solid red">This is from custom element A</div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div style="color: red; border: 1px solid red">This is from custom element</div>
		<div style="color: red; border: 1px solid red">This is from custom element A</div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div style="color: red">This is from custom element</div>
		<div style="color: red; border: 1px solid red">This is from custom element</div>