[WCJS] Regression: custom elemenents in innerHTML are not rendered anymore in 1.1.0

[mzeiher]

Description If you nest custom elements and attach them to a node via innerHTML the custom elements are not constructed anymore (works with webcomponents 1.0.14)

Live Demo https://github.com/mzeiher/webcomponentjs-bug

git clone npm install startstatic http://127.0.0.1:8088 and click a button, in chrome everything works in polyfilled browsers the nested elements are not constructed

-> switch webcomponentjs version to 1.0.14 everything works as expected

Steps to Reproduce attach a custom element to DOM, get the elements reference and try to append elements wit innerHTML ->custom elements within the innerHTML are not styled/parsed/constructed

Affected Browsers

• [ ] Chrome
• [x] IE11
• [x] FF 58
• [x] Safari11
• [x] Edge 40.15063.674.0

Versions webcomponents: v1.1.0

works in 1.0.14

[mzeiher]

I narrowed down the problem to a change between the custom-elements version 1.0.4 and 1.0.8 -> looking further into it, bug can be moved to webcomponents/custom-elements

[mzeiher]

ok, the problem is in the custom-elements in combination with shadydom custom-elements' CustomElementInternal.js Line 252

    const ownerDocument = element.ownerDocument;
    if (
      !ownerDocument.defaultView &&
      !(ownerDocument.__CE_isImportDocument && ownerDocument.__CE_hasRegistry)
    ) return;

was introduced in the latest custom-element version, if you nest custom elements the child custom-element's ownerDocument is an "inert" document, because the element was created with shadydoms inertDocument.createElement method, now the custom control doesn't get upgraded because the ownerDocument.__CE_hasRegistry doesn't exist. Strangely if you add a debugger directive right in front of the if and wait some time until you resume the ownerDocument changes to the main document with __CE_hasRegistry set. Is there a timeout or hook or something wich fiddles with the ownerDocument of elements? I'm not yet familliar with the whole architecture of the polyfills. If you remove the if-clause everything works as expected. Maybesomeone with more experience with the polyfills can lighten me up?

[TimvdLippe]

This appears to be resolved along the way, as I can now observe the same behavior in Chrome and in Firefox: http://jsbin.com/lutopujeyi/1/edit?html,output

[mzeiher]

Hi but shouldn't nesting work with innerHTML I would say the behaviour in 1.0.14 seems more likely to be the "right" one (see: http://jsbin.com/zukodadacu/1/edit?html,output)

[TimvdLippe]

Hm, yes there is a difference there. Need to investigate, but the reproduction example is quite tough to understand :cry:

[mzeiher]

Hi, I justed added some comments in the sample: http://jsbin.com/xumetugese/1/edit?html,output

if I use the custom elements directly in the DOM <my-element-nested....> everything works, but as soon as I want to append or change the dom under my-element with innerHTML the nested custom element doesn't get initialized with version 2.0, with 1.0.14 it seems to work the appendChild function howerver works.

[adjenks]

I encountered the same problem. I resolved this problem by inserting my markup into a template and then appending a clone of the template contents as a child.

shadow.appendChild(template.content.cloneNode(true))

I only encountered this problem in Edge. It worked fine adding markup directly to the innerHTML of the shadow in Firefox and Chrome.

[dfreedm]

Related to #138

[calebdwilliams]

I'm having this issue as well. Is there any timeline for a fix here?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.