Lit-element: Styles disappear when element is re appended when using constructible stylesheets

[minht11]

Description

When element is temporarily removed and then re appended to the dom styles from static get styles do not work. This only happens when browser supports constructible stylesheets. Manually calling this.shadowRoot!.adoptedStyleSheets = MyElement.styles.map(style => style.styleSheet) inside connectedCallback fixes the problem for that element but not for its children.

Live Demo

https://stackblitz.com/edit/typescript-vva73g?file=my-element.ts

Steps to Reproduce

1. Create my-element
2. Append my-element to document.body
3. Remove the same element from document.body
4. Re append the same element to document.body

Expected Results

Styles are still applied.

Actual Results

No styles from adoptedStyleSheets are applied.

[sorvell]

Thanks for reporting this; it's a Chrome bug and has been filed here: https://bugs.chromium.org/p/chromium/issues/detail?id=934340.

Hopefully this issue will be fixed before the feature is released. If not, we'll add a workaround of some sort.

[balloob]

Can't open the Chrome issue, here is a minimal repro:

Minimal repro here: https://65s7tj-jqi1d9.stackblitz.io
Code at https://stackblitz.com/edit/65s7tj-jqi1d9

[minht11]

It's fixed in Chrome 74 canary, but broken in Chrome 73 beta, though I think the fix will be backported to 73 before it is released.

[justinfagnani]

Looks like the fix was merged into 73. We should be seeing it roll out soon.