Custom Element support for child functions and named child functions

[matt-gadd]

Enhancement
In Dojo 7 we now have more types of children for widgets, the existing scenario being:

<Foo>
    <Bar />
</Foo>

With the new children functionality we now have the following additional ways to accept children:

Render func:

<Foo>
    { () => <Bar /> }
</Foo>

Named renders:

<Foo>
    {{ 
      bar: <Bar />, 
      qux: <Qux /> 
    }}
</Foo>

Named render funcs:

<Foo>
    {{ 
      bar: () => <Bar />, 
      qux: () => <Qux /> 
    }}
</Foo>

Named render funcs that inject values:

<Foo>
    {{ 
      bar: (active) => <Bar active={ active } />, 
      qux: (active) => <Qux active={ active } /> 
    }}
</Foo>

None of the above are supported with Custom Elements.

Some thoughts on how we could at least add basic support for the first 3:

• To support basic render functions, we could add a function on top of our VNode and WNode objects, that return them themselves. This would mean we would not need to touch the Custom Element code for this support, as basically any Node can double as a factory safely. This probably also gives the benefit of every child being able to support both RenderResult and () => RenderResult, without any additional work.

• For the named children. We add an additional property to our Custom Element wrapper that allows the user to specify the child name as a property. This would be similar to slot's for Custom Elements and we might even want to use that name.

An example of the above, for the following widget use in dojo:

<Foo>
    {{ 
      bar: <Bar />, 
      qux: <Qux /> 
    }}
</Foo>

for custom elements it would be:

<dojo-foo>
  <dojo-bar slot="bar" />
  <dojo-qux slot="qux" />
</dojo-foo>

The final scenario ie passing things into a render func, will need further thought as it is not suited to an event handler, and it means that the child nodes will essentially no longer be able to be used declaratively.