"render" nanos

[mikabytes]

Is your feature request related to a problem? Please describe.
Currently when we want to run several nanos on the same page, often nested within each other, there's a lot of boilerplate code for settings things up. Many steps of createElement/appendChild, and the result is less than intuitive.

Describe the solution you'd like
It'd be nice if we could borrow inspiration from lit-html and develop a function that works similarly to their render.

Let's suppose we have a template nano, a main page nano, and a popup nano. What I'd like to see is something like:

const result = yield nanos`
  <template>
    <mainPage>
      <popup slot="popup"></popup>
    </mainPage>
  </template>
`

Note: These are not customElements. These are sagas, as any other nano. However, the concept is familiar to web users and more intuitive than many lines of javascript calls.

• The returned result should be the return value of the first nano that quits.
• All nanos should be automatically canceled when one returns. (we do this today using redux-saga's race function)

Describe alternatives you've considered

1. We could package nanos inside real customElements and use lit-html to render them. The result would look very much like a React container component.

Additional context
No matter what solution we go for, it is imperative that we can await the result from the nanos. This means that the sagas can't live free in the wild, but must be bound somehow to its creator.

[mikabytes]

While this is implemented, there are some weird corner cases that lead to unpredictable behavior.

Moving this to the Bronze milestone.