ZoolWay/app.html

## app.html
<template>
  <require from="norm-comp"></require>
  <require from="less-comp"></require>
  <require from="list-comp"></require>

  <h1>Getting view model of containerless custom element</h1>

  <list-comp>
    <norm-comp text="item one, normal"></norm-comp>
    <norm-comp text="item two, normal"></norm-comp>
    <less-comp view-model.ref="lessVmRef" text="item three, containerless"></less-comp>
  </list-comp>

</template>

## app.js
import { bindable, observable } from 'aurelia-framework'

export class App {
  lessVmRef = null;

  attached() {
    console.info(`Attached, less-vm-ref:`, this.lessVmRef);
  }
}

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

## less-comp.html
<template>
  <li>${text}</li>
</template>

## less-comp.js
import { bindable, containerless } from 'aurelia-framework'

@containerless
export class LessComp {
  @bindable text = null;

  created(owningView, view) {
      console.log('view of less-comp:', view);
  }

  constructor() {
  }

  activate(model) {
  }

  attached() {
  }

  detached() {
  }
}

## list-comp.html
<template>
  <ul ref="listContainer">
    <slot></slot>
  </ul>
</template>

## list-comp.js
import { bindable, children, containerless } from 'aurelia-framework'

export class ListComp {
  @children('*') domItems = null;
  listContainer = null;

  attached() {
    console.info('Got children:', this.domItems);
    console.info('List container:', this.listContainer);
    for (let i = 0; i < this.listContainer.children.length; i++) {
      let c = this.listContainer.children[i];
      console.info(`Child #${i}, au = `, c.au);
    }
  }

  detached() {
  }
}

## norm-comp.html
<template>
  <li>norm: ${text}</li>
</template>

## norm-comp.js
import { bindable } from 'aurelia-framework'

export class NormComp {
  @bindable text = null;

  constructor() {
  }

  activate(model) {
  }

  attached() {
  }

  detached() {
  }
}
	<template>
	<require from="norm-comp"></require>
	<require from="less-comp"></require>
	<require from="list-comp"></require>

	<h1>Getting view model of containerless custom element</h1>

	<list-comp>
	<norm-comp text="item one, normal"></norm-comp>
	<norm-comp text="item two, normal"></norm-comp>
	<less-comp view-model.ref="lessVmRef" text="item three, containerless"></less-comp>
	</list-comp>

	</template>
	import { bindable, observable } from 'aurelia-framework'

	export class App {
	lessVmRef = null;

	attached() {
	console.info(`Attached, less-vm-ref:`, this.lessVmRef);
	}
	}
	<!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>
	import { bindable, containerless } from 'aurelia-framework'

	@containerless
	export class LessComp {
	@bindable text = null;

	created(owningView, view) {
	console.log('view of less-comp:', view);
	}

	constructor() {
	}

	activate(model) {
	}

	attached() {
	}

	detached() {
	}
	}
	<template>
	<ul ref="listContainer">
	<slot></slot>
	</ul>
	</template>
	import { bindable, children, containerless } from 'aurelia-framework'

	export class ListComp {
	@children('*') domItems = null;
	listContainer = null;

	attached() {
	console.info('Got children:', this.domItems);
	console.info('List container:', this.listContainer);
	for (let i = 0; i < this.listContainer.children.length; i++) {
	let c = this.listContainer.children[i];
	console.info(`Child #${i}, au = `, c.au);
	}
	}

	detached() {
	}
	}
	import { bindable } from 'aurelia-framework'

	export class NormComp {
	@bindable text = null;

	constructor() {
	}

	activate(model) {
	}

	attached() {
	}

	detached() {
	}
	}