TYPO3 Core

As already reported in #100270 and reverted in #101464, web Components with CSS in shadowRoot are not usable in cross frame boundaries.
This happens when a custom element is created within window.list_frame via document.createElement() and is then attached to another frame via appendChild().
This mostly happens when code is written that renders web components into a Modal (which is placed in the outer frame)

Following exception is logged in that case.

css-tag.js?bust=1692874613:6 Uncaught DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
    at S (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/css-tag.js?bust=1692874613:6:1012)
    at IconElement.createRenderRoot (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js?bust=1692874613:6:2898)
    at IconElement.createRenderRoot (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js?bust=1692874613:6:163)
    at IconElement.connectedCallback (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js?bust=1692874613:6:3010)
    at IconElement.connectedCallback (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js?bust=1692874613:6:478)
    at R.k (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js?bust=1692874613:6:4627)
    at R.$ (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js?bust=1692874613:6:4701)
    at R.g (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js?bust=1692874613:6:5085)
    at R._$AI (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js?bust=1692874613:6:4534)
    at D (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-html/lit-html.js?bust=1692874613:6:7898)

This can easily reproduced via:

document.body.appendChild(window.list_frame.document.createElement('typo3-backend-icon'))

Which also logs to the console:

 
css-tag.js?bust=1692874613:6 Uncaught DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
    at S (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/css-tag.js?bust=1692874613:6:1012)
    at IconElement.createRenderRoot (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js?bust=1692874613:6:2898)
    at IconElement.createRenderRoot (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js?bust=1692874613:6:163)
    at IconElement.connectedCallback (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/@lit/reactive-element/reactive-element.js?bust=1692874613:6:3010)
    at IconElement.connectedCallback (http://t3core.localhost/typo3/sysext/core/Resources/Public/JavaScript/Contrib/lit-element/lit-element.js?bust=1692874613:6:478)
    at <anonymous>:1:15

Note that this is known in lit, but not easily fixable, as the css`` template literaly implicitly use (window).CSSStyleSheet

https://github.com/lit/lit-element/issues/1139
https://github.com/lit/lit/issues/2068