Polyfill doesn't render shadow elements after custom element

[JanMiksovsky]

If an outer element contains an inner element, and the outer element has a shadow subtree that looks like:

<inner-element></inner-element> The polyfill won't show this text.

The latest polyfill (v1.0.0-rc.5) won't render the indicated text. Native Shadow DOM implementations handle this fine. See https://jsbin.com/xakexe/edit?html,output.

[bicknellr]

I'm seeing this the other way around when the polyfill is enabled: "The polyfill won't show this text." is the only visible text in that case. That's what I'd expect in this situation anyways given that ShadowRoot's innerHTML is not currently patched. Adding it should be high-priority bug for the custom elements polyfill though.

[bicknellr]

Hmm, innerHTML isn't currently specced anywhere about being on ShadowRoot. I think they still intended to include it? I'd still recommend using a template and importing it's content if possible, anyway. :)

Also, it's really strange that you're seeing the opposite behavior when using the polyfill. Anything else you can say about your repro setup that could be related?

[JanMiksovsky]

The spec for ShadowRoot doesn't mention innerHTML, but as far as I know, that's been supported in Blink as far back as Shadow DOM v0. WebKit supports it too. It's worth noting the spec doesn't mention innerHTML anywhere, even on Element, so I'm confused. Perhaps @domenic can explain whether a ShadowRoot is expected to have an innerHTML.

In any event, as described in the bug, I see only "This text will be visible." when opening the repro case under:

• Mac Firefox 52.0 (latest stable release).
• Microsoft Edge 38.14393.0.0 (latest stable release).
  I've confirmed this on multiple machines as well. I'm puzzled as to why you would have such different results.

[domenic]

innerHTML is specified in https://w3c.github.io/DOM-Parsing/, which unfortunately hasn't seen much editorship recently. The issue to spec ShadowRoot's innerHTML there is w3c/DOM-Parsing#21

[JanMiksovsky]

@bicknellr Two things:

1. Is the bug a custom elements polyfill bug or a ShadyDOM bug? It sounds like the latter, in which case the bug should probably move to the corresponding repro.
2. Since you've identified the root cause and are tracking that separately, I think you can close this bug.

[bicknellr]

Oh, I didn't consider the interaction with ShadyDOM here.

[bicknellr]

It doesn't look like it's implemented there either. I lost my example setup but that's probably why we were seeing different results.

[TimvdLippe]

@JanMiksovsky I have updated your JSBin to use the 2.0 version and I am no longer seeing this issue (https://jsbin.com/puhibaxoqu/edit?html,output) E.g. the output in Firefox and Chrome is the same, even after forcing the polyfills. Was this issue resolved for you?

[JanMiksovsky]

I can confirm that your updated JSBin looks good in both Firefox and Edge (the polyfilled browsers we care about), so this can be closed.

[TimvdLippe]

Awesome, thanks for the confirmation.