Section on passing components as content

[insin]

I only have experience with React and Vue here (and Vue 2 may set the cat amongst the pigeons in feature comparisons when it also adds render() methods), so some examples of the sort of thing I mean.

React

http://facebook.github.io/react/docs/multiple-components.html#children http://facebook.github.io/react/docs/top-level-api.html#react.children https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626 - "render callbacks"

Placing all child contents

MyComponent#render():

<div>Before {this.props.children} After</div>

<MyComponent><p>Child 1</p><p>Child 2</p></MyComponent>

Passing rendered elements as props

MyComponent#render():

<div>
  {this.props.foo}
  {this.props.children}
  {this.props.bar}
</div>

<MyComponent bar={<p>Bar</p>} foo={<p>Foo</p>}>
  <p>Child 1</p><p>Child 2</p>
</MyComponent>

Dynamic component as a prop

MyComponent#getDefaultProps():

return {someProp: 'div'}

MyComponent#render():

<this.props.someProp>...</this.props.someProp>

<MyComponent/>
<MyComponent someProp={SomeOtherComponent}/>

Vue

https://vuejs.org/guide/components.html#Content-Distribution-with-Slots

Placing all child contents

MyComponent template:

<div>Before <slot></slot> After</div>

<my-component><p>Child 1</p><p>Child 2</p></my-component>

Named slots

MyComponent template:

<div>
  <slot name="foo"></slot>
  <slot></slot>
  <slot name="bar"></slot>
</div>

<my-component>
  <p slot="bar">Bar</p>
  <p slot="foo">Foo</p>
  <p>Child 1</p><p>Child 2</p>
</my-component>

[jeffcarp]

This is awesome!

In the Vue docs it says:

Vue.js implements a content distribution API that is modeled after with the current Web Components spec draft, using the special element to serve as distribution outlets for the original content.

So I was guessing Polymer was the same way but it looks like they use <content> and query selectors https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-distribution