Re: [whatwg/dom] Declarative Shadow DOM (#510)

I want to tease out how this might be used in a React component to illustrate my thinking and a question I have. In this example I use `<shadowroot>` but it can apply to rest of the proposals, too.

There is a very big use case for using declarative shadow DOM in React to scope styles. They already have their own composition model, so they don't need that part of it, but anyone who is even remotely in touch with that community knows about the droves of CSS-in-JS libraries that have their own encapsulation models.

If using declarative shadow DOM, they might think to use it something like the following.

```js
const Hello = props => (
  <div>
    <shadowroot>
      <style>:host { border: 1px solid black; }</style>
      Hello, {props.name}!
    </shadowroot>
  </div>
);
```

It's not clear to me what happens if React updates content in the `<shadowroot>`. For example, when that component re-renders if the name is changed, it will update the content in the shadow root (but only the text node where the name is). **Will this reflect in the real shadow root?**

If not, would it be rewritten as:

```js
const Hello = props => (
  <div>
    <shadowroot>
      <style>:host { border: 1px solid black; }</style>
      Hello, <slot />!
    </shadowroot>
    {props.name}
  </div>
);
```

It seems like this would play just fine with server rendering? Bots that aren't adapted to declarative shadow DOM would read the content, thought it would be out of order. This could be problematic. Browsers that implement the element would upgrade immediately, no? If so then my concerns are probably less important than I originally thought.

Good to see traction on this nonetheless, but would be fantastic to see other community involvement.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/510#issuecomment-340614286