kabaehr/app.css

## app.css
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 30px;
}

list-item {
  float: left;
}

.list, .scroll-list {
  display: block;
  margin-bottom 20px;
}

.list {
  overflow: hidden;
}

.scroll-list {
  max-height: 150px;
  overflow: scroll;
}

.button-container button-element {
  display: block;
  margin: 15px 0px;
}

div[notify-me] {
  width: 50%;
  height: 50px;
  float: left;
  margin-bottom: 30px;
}

div[notify-me].red {
  background-color: lightcoral;
}

div[notify-me].blue {
  background-color: lightblue;
}

## app.html
<template>
  <require from="button-element"></require>
  <!-- HTML only components must be imported like this -->
  <require from="list-item.html"></require>

  <require from="scroll-end"></require>
  <require from="notify-me"></require>
  <require from="app.css"></require>

  <h2>Custom element</h2>

  <h3>Simple HTML only custom element</h3>

  <div class="list">
    <list-item repeat.for="i of listItems">
     ${i}
    </list-item>
  </div>

  <h3>Simple custom element with JS</h3>

  <div class="button-container">
    <button-element></button-element>
    <button-element text="Hi! My name is Mr. Text"></button-element>
    <button-element text="Hello! My name is Mrs. Text"></button-element>
  </div>

  <hr/>

  <h2>Custom attribute</h2>

  <h3>Simple custom attribute</h3>

  <div notify-me="message:you clicked the red" class="red"></div>
  <div notify-me="message:you clicked the blue" class="blue"></div>

  <h3>Advanced custom attribute which adds data</h3>

  <div class="scroll-list" scroll-end="load.call:addNumbers()">
    <list-item repeat.for="i of scrollItems">
     ${i}
    </list-item>
  </div>

</template>

## app.js
export class App {
  listItems = 6;
  scrollItems = 6;


  //this could also be a function that makes an API call
  addNumbers = function() {
    this.scrollItems += 3;
  }
}

## button-element.html
<template>
  <button click.delegate="showText = !showText">
    ${buttonTexts[showText]}
  </button>
  <p show.bind="showText">
    ${text}
  </p>
</template>

## button-element.js
import { bindable } from 'aurelia-framework';

export class ButtonElementCustomElement {

  @bindable text = 'I am just the default Text :/';

  showText = false;
  buttonTexts = { true : 'Hide text', false: 'Show text'}
}

## 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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## list-item.html
<template>
  <style>
    list-item {
      display: block;
      height: 110px;
      width: 200px;
      border: 1px solid green;
      border-radius: 5px;
      margin: 5px;
    }

    div {
      text-align: center;
    }

    .number {
      align-self: center;
      font-size: 35px;
      color: green;
      margin: 10px 0px;
    }
  </style>
  <div>
    <span>I am just a number <br /> with style</span>
    <div class="number">
      <content></content>
    </div>
  </div>
</template>

## notify-me.js
import { bindable , inject } from 'aurelia-framework';

@inject(Element)
export class NotifyMeCustomAttribute {

  @bindable message;
  element;

  constructor(element) {
    this.element = element;
  }

  attached() {
    //Actual we would achieve the same functionality with <div onclick="alert('message')">
    //but imagin we would use some ultra advanced dialog/message/toast/modal service here to inform the user,
    //send him an E-Mail, subscribe him to a newsletter and much more

    this.element.addEventListener('click', () => {
        alert(this.message);
    });
  }
}

## scroll-end.js
import { bindable , inject } from 'aurelia-framework';

@inject(Element)
export class ScrollEndCustomAttribute {

  @bindable load;
  element;

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.element.addEventListener('scroll', () => {
        if (this.element.scrollTop + this.element.offsetHeight >= this.element.scrollHeight) {
            this.load();
        }
    });
  }
}
	body {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	margin-bottom: 30px;
	}

	list-item {
	float: left;
	}

	.list, .scroll-list {
	display: block;
	margin-bottom 20px;
	}

	.list {
	overflow: hidden;
	}

	.scroll-list {
	max-height: 150px;
	overflow: scroll;
	}

	.button-container button-element {
	display: block;
	margin: 15px 0px;
	}

	div[notify-me] {
	width: 50%;
	height: 50px;
	float: left;
	margin-bottom: 30px;
	}

	div[notify-me].red {
	background-color: lightcoral;
	}

	div[notify-me].blue {
	background-color: lightblue;
	}
	<template>
	<require from="button-element"></require>
	<!-- HTML only components must be imported like this -->
	<require from="list-item.html"></require>

	<require from="scroll-end"></require>
	<require from="notify-me"></require>
	<require from="app.css"></require>

	<h2>Custom element</h2>

	<h3>Simple HTML only custom element</h3>

	<div class="list">
	<list-item repeat.for="i of listItems">
	${i}
	</list-item>
	</div>

	<h3>Simple custom element with JS</h3>

	<div class="button-container">
	<button-element></button-element>
	<button-element text="Hi! My name is Mr. Text"></button-element>
	<button-element text="Hello! My name is Mrs. Text"></button-element>
	</div>

	<hr/>

	<h2>Custom attribute</h2>

	<h3>Simple custom attribute</h3>

	<div notify-me="message:you clicked the red" class="red"></div>
	<div notify-me="message:you clicked the blue" class="blue"></div>

	<h3>Advanced custom attribute which adds data</h3>

	<div class="scroll-list" scroll-end="load.call:addNumbers()">
	<list-item repeat.for="i of scrollItems">
	${i}
	</list-item>
	</div>

	</template>
	export class App {
	listItems = 6;
	scrollItems = 6;


	//this could also be a function that makes an API call
	addNumbers = function() {
	this.scrollItems += 3;
	}
	}
	<template>
	<button click.delegate="showText = !showText">
	${buttonTexts[showText]}
	</button>
	<p show.bind="showText">
	${text}
	</p>
	</template>
	import { bindable } from 'aurelia-framework';

	export class ButtonElementCustomElement {

	@bindable text = 'I am just the default Text :/';

	showText = false;
	buttonTexts = { true : 'Hide text', false: 'Show text'}
	}
	<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<style>
	list-item {
	display: block;
	height: 110px;
	width: 200px;
	border: 1px solid green;
	border-radius: 5px;
	margin: 5px;
	}

	div {
	text-align: center;
	}

	.number {
	align-self: center;
	font-size: 35px;
	color: green;
	margin: 10px 0px;
	}
	</style>
	<div>
	<span>I am just a number <br /> with style</span>
	<div class="number">
	<content></content>
	</div>
	</div>
	</template>
	import { bindable , inject } from 'aurelia-framework';

	@inject(Element)
	export class NotifyMeCustomAttribute {

	@bindable message;
	element;

	constructor(element) {
	this.element = element;
	}

	attached() {
	//Actual we would achieve the same functionality with <div onclick="alert('message')">
	//but imagin we would use some ultra advanced dialog/message/toast/modal service here to inform the user,
	//send him an E-Mail, subscribe him to a newsletter and much more

	this.element.addEventListener('click', () => {
	alert(this.message);
	});
	}
	}
	import { bindable , inject } from 'aurelia-framework';

	@inject(Element)
	export class ScrollEndCustomAttribute {

	@bindable load;
	element;

	constructor(element) {
	this.element = element;
	}

	attached() {
	this.element.addEventListener('scroll', () => {
	if (this.element.scrollTop + this.element.offsetHeight >= this.element.scrollHeight) {
	this.load();
	}
	});
	}
	}