How would this work: appendChild(shadowRoot)

[treshugart]

I was just thinking how a React app might work with something like:

class App extends React.Component {
  render () {
    return (
      <shadow-root>
        <slot />
      </shadow-root>
    );
  }
}

Essentially React would end up doing:

// This...
app.appendChild(document.createElement('shadow-root'):

And this would map to something like:

// Would be the same thing as (open by default)...
app.attachShadow({ mode: 'open' });

This would enable declarative DSLs on top of the DOM APIs (JSX et al) to work seamlessly, just like HTML would if there was a <shadow-root /> built-in, like we're proposing in this lib.

Maybe since appending a child is essentially like sending an instruction to the host to create a shadow root, it should default to closed? This presents other questions.

In order for React (et al) to then create an open shadow root from something like:

<shadow-root mode="open">
  <slot />
</shadow-root>

It would have to create the shadow root first, set the attribute and then append the child. This feels a bit brittle for one to have to do that exactly (i.e. Incremental DOM appends before setting attributes / properties), so this would be a good reason to make the mode property / attribute on a shadow root mutable.

Spec issues

Since an imperative API was designed up front without the consideration of a declarative API,

1. Shadow roots can't be undone. How do you then translate a call to removeChild(shadowRoot)?
2. You must pass a mode at the same time as attaching, and it can't be changed. How does this translate to something like shadowRoot.setAttribute('mode') after it's been appended (totally valid API).

[treshugart]

This won't work well because it can't be a child of the host. If it was you wouldn't be able to distinguish light DOM / shadow DOM.