Experimental Chrome implementation not working when rendered from React about declarative-shadow-dom

[mfreed7]

Thanks for the issue and the example! It would seem that the reason for this issue is that React/Babel transforms <template shadowroot="open"> into this:

}, _react.default.createElement("template", {
    shadowroot: "open",
    __source: {
      fileName: _jsxFileName,
      lineNumber: 22
    }

And React's createElement will first create a <template> element, and then add a "shadowroot" attribute. And as-proposed, that just results in a "normal" template with a "shadowroot" attribute.

I think to support this use case, React will have to be made "declarative Shadow DOM aware" by parsing this more directly into native HTML as <template shadowroot="open">, or more likely by converting it to a call to attachShadow().

[steobrien]

Got it. Thanks for explaining. I’ll look into this a little more.

[steobrien]

Closing: this is as per the proposed spec. The part I missed:

The entire motivation for this feature is no-JS environments; therefore, to simplify the implementation, only parser-generated templates will create shadow roots, and adding the shadowroot attribute to a <template> after the fact will have no effect. To create a shadowroot using JS, the existing element.attachShadow() API should be used.

For posterity, I note that direct addition of HTML through JavaScript works (in the current implementation):

document.body.innerHTML = "<div><template shadowroot=open>displayed in shadow dom</template></div>"