Element with existing shadow root is broken with Polymer 3.3.0

[denis-anisimov]

I have a page which loads webcomponents-loader.js , polymer 3.3.0 and this template:

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';

class MyComponentElement extends PolymerElement {
  static get template() {
    return html`
        <button id="button">Click</button>
        <div id="content"></div>
    `;
  }

  static get is() {
    return 'my-el';
  }
}

window.MyComponentElement = MyComponentElement;

Please note that there is no customElements.define(MyComponentElement.is, MyComponentElement); line So the element is not added out of the box to the custom elements.

Now I write the JS code in the console:

var el = document.createElement('my-el');
el.attachShadow({mode: 'open'});
document.body.appendChild(el);

The element is added as a child and there is a shadow root for it.

Now I execute: customElements.define(window.MyComponentElement.is, window.MyComponentElement);

<my-el> shadow root is not reused and it has no expected elements there: button and div. The shadow root is just empty.

If I add a new my-el (now when it's added to customElements ) then this added element has everything needed: its shadow root is not empty.

The same scenario works fine with Polymer 3.2.0.

[web-padawan]

This is most likely related to the problem described in #5574 (also introduced in 3.3.0). And the actual regression might be this one: https://github.com/Polymer/polymer/issues/5574#issuecomment-531365305

@sorvell could you investigate what would be a proper fix?

[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.