slot functionality

[thomaspink]

Idea:
It should be possible to render html which is defined in the dom or parent document into specific slots in your child component (like multiple outlets in ember).
You can define templates with a slot id inside the html of your component. In your template of the component you can not mark the places where the outer template should be rendered.

<my-component>
    <template slot="content">
        some content
    </template>
</my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            <slot ref="content"></slot>
        </div>
    `
})
class MyComponent {}

renderes into:

<my-component>
    <div>
        some content
    </div>
</my-component>

The context inside the template tag has to be discussed. Is it the context of my-component or the parent component.

Slots should be the default behaviour of component templates. Slots/Templates should also be used internally for rendering the components template into the dom.

<my-component></my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            some content
        </div>
    `
})
class MyComponent {}

The code above is the same as:

<my-component><slot ref="_body_"></slot></my-component>

@Component({
    selector: 'my-component',
    template: `
        <div>
            some content
        </div>
    `
})
class MyComponent {}

This will give us a powerful functionality for rendering html into different parts of your template

[thomaspink]

@dominikstrasser @sebherzinger suggestions, ideas, feedback?