Angular2：用组件的模板替换主机元素

我是新来的angular一般而言并且angular2具体来说。我正在尝试编写一个容器组件，其中应该包含子组件。

例如容器组件:

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyList {
}

子组件：

import { Component } from 'angular2/core'

@Component({
  selector: 'my-item',
  template: `
    <li>
      <ng-content></ng-content>
    </li>
  `
})
export class MyItem {
}

我想制作这样的结构：

<my-list>
    <my-item>One</my-item>
    <my-item>Two</my-item>
</my-list>

将被渲染为以下之一：

<my-list>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</my-list>

但相反，我还保留了容器的主机元素和项目：

<my-list>
    <ul>
        <my-item>
            <li>One</li>
        </my-item>
        <my-item>
            <li>Two</li>
        </my-item>
    </ul>
 </my-list>

普朗克可以在这里找到 https://plnkr.co/edit/um5BC7?p=preview

问题：有没有办法消除宿主元素并只留下渲染的模板？

这你应该得到你想要的：

@Component({
  selector: 'ul[my-list]',
  template: `
    <ng-content></ng-content>
  `
})
export class MyList {
}

@Component({
  selector: 'li[my-item]',
  template: `
    <ng-content></ng-content>
  `
})
export class MyItem {
...
}

<ul my-list>
    <li my-item>One</li my-item>
    <li my-item>Two</li my-item>
</ul my-list>