timfish/app.html

## app.html
<template>
  <require from="./svg-rect"></require>

  <svg width="100" height="100" style="background-color:lightblue">

    <rect></rect>
  </svg>
</template>

## app.js
export class App {

}

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

## svg-rect.html
<template>
 <require from="./svg-remove"></require>

  <svg svg-remove>
    <!--<rect x.bind="rect.x" y.bind="rect.y" width.bind="rect.width" height.bind="rect.height"></rect>-->
  </svg>
</template>

## svg-rect.js
import {bindable} from 'aurelia-framework'

export class Rect {
  @bindable rect;


}

## svg-remove.js
import {inject, customAttribute} from 'aurelia-framework';

@customAttribute('svg-remove')
@inject(Element)
export class SvgRemove {
  constructor(element){
    this.element = element;
  }

  attached(){
    console.log(this.element.children)
    this.element.children
  }
}
	<template>
	<require from="./svg-rect"></require>

	<svg width="100" height="100" style="background-color:lightblue">

	<rect></rect>
	</svg>
	</template>
	<!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>
	<template>
	<require from="./svg-remove"></require>

	<svg svg-remove>
	<!--<rect x.bind="rect.x" y.bind="rect.y" width.bind="rect.width" height.bind="rect.height"></rect>-->
	</svg>
	</template>
	import {bindable} from 'aurelia-framework'

	export class Rect {
	@bindable rect;


	}