Another approach that can be used to create components that can replace there host elements, based on my SO question(http://stackoverflow.com/questions/34280475/remove-the-host-html-element-selectors-created-by-angular-component). Consider checking this http://plnkr.co/edit/LFKN5doI9Y9wKwPxBbcJ?p=preview

angular2-replace.ts

/// <reference path="../node_modules/angular2/core.d.ts" />
/// <reference path="../node_modules/angular2/platform/browser.d.ts" />
/// <reference path="../node_modules/angular2/common.d.ts" />

import { Component, View, Directive, Input, ElementRef, Output, EventEmitter } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';


//remove the host of avatar to be rendered as svg
@Directive({
	selector: '[remove-host]'
})
class RemoveHost {
	constructor(private el: ElementRef) {

	}

	//wait for the component to render completely
	ngOnInit() {
		var nativeElement: HTMLElement = this.el.nativeElement,
			parentElement: HTMLElement = nativeElement.parentElement;
		// move all children out of the element
		while (nativeElement.firstChild) {
			parentElement.insertBefore(nativeElement.firstChild, nativeElement);
		}
		// remove the empty element
		parentElement.removeChild(nativeElement);
	}
}


//Avatar
@Component({
	selector: 'avatar'
})
@View({
	template: `
		<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="50" height="50" viewBox="0 0 50 50">
			<circle cx="50%" cy="50%" r="50%" fill="#C0392B" />
			<text y="70%" x="50%" text-anchor="middle" fill="#ffffff" font-weight="700" font-size="30px">
				{{name[0] | uppercase}}
			</text>
		</svg>`,
	directives: []
})
class Avatar {
	@Input() name: string;
	constructor () {
	}
}


//Heroes List with Avatar
@Component({
	selector: 'heroes-list',
	inputs: ['heroes: list']
})
@View({
	template: `
		<ul class="heroes">
			<li *ngFor="#hero of heroes; #idx = index">
				<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="250" height="50" viewBox="0 0 250 50">
					<avatar [name]="hero.name" remove-host></avatar>
					<text y="20" x="60" fill="#000000" font-weight="700" font-size="20px">
						{{hero.name}}
					</text>
					<text y="40" x="60" fill="#000000" font-weight="500" font-size="16px">
						{{hero.email}}
					</text>
				</svg>
				<div>
					<button (click)="triggerEdit(idx)">Edit</button>
				</div>
			</li>
		</ul>`,
	styles: [`
    svg text {
    	font-family: "HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif";
    }
    li {
    	list-style: none;
    }
    div {
    	display: inline-block;
    	vertical-align: 25px;
    }
  `],
	directives: [Avatar, RemoveHost]
})
class HeoresList {
	heroes: Array<Object>;
	@Output() onEdit: EventEmitter<any> = new EventEmitter();
	triggerEdit (index) {
		console.log(index);
		this.onEdit.emit(index);
	}
}


//List with Edit input
@Component({
	selector: 'heroes'
})
@View({
	template: `
	    <h2>{{title}}</h2>
		<div *ngIf="editIndex !== -1" class="top">
			<label>Name: <input type="text" [(ngModel)]="editingName" /></label>
			<button (click)="onUpdate()">Update</button>
		</div>
		<heroes-list [list]="heroes" (onEdit)="onEdit($event)"></heroes-list>
	`,
	styles: [`
		div {
			display: inline-block;
		}
		top {
			vertical-align: top;
		}
	`],
	directives: [HeoresList]
})
class Heores {
	title = 'Heroes List';
	editIndex = -1;
	editingName = '';
	heroes = [
		{ "id": 11, "name": "nice", "email": "[email protected]" },
		{ "id": 12, "name": "Narco", "email": "[email protected]" },
		{ "id": 13, "name": "Bombasto", "email": "[email protected]" },
		{ "id": 14, "name": "Celeritas", "email": "[email protected]" },
		{ "id": 15, "name": "Magneta", "email": "[email protected]" },
		{ "id": 16, "name": "Rubber Man", "email": "[email protected]" },
		{ "id": 17, "name": "Dynama", "email": "[email protected]" },
		{ "id": 18, "name": "IQ", "email": "[email protected]" },
		{ "id": 19, "name": "Magma", "email": "[email protected]" },
		{ "id": 20, "name": "Tornado", "email": "[email protected]" }
	];
	onEdit(index: number) {
		this.editIndex = index;
		this.editingName = this.heroes[index].name;
	}
	onUpdate() {
		this.heroes[this.editIndex].name = this.editingName;
		this.editIndex = -1;
	}
}
bootstrap(Heores);

index.html

<html>

<head>
    <title>Angular 2 Component with replace directive</title>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
</head>

<body>
    <heroes>Loading...</heroes>
    <script>
        System.import('angular2-replace.js')
            .then(null, console.error.bind(console));
    </script>
</body>

</html>