Project

General

Profile

Actions
Copy link

Bug #101747

closed

Web Components with CSS in shadowRoot are not usable in cross frame boundaries

Added by Benjamin Franzke 9 months ago. Updated 9 months ago.

Status:
Rejected
Priority:
Should have
Assignee:
Benjamin Franzke
Category:
Backend JavaScript
Target version:
Candidate for patchlevel
Start date:
2023-08-24
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

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

Files

Download all files
firefox-web-component-cross-frame-adopts-to-HTMLElement.png (452 KB) firefox-web-component-cross-frame-adopts-to-HTMLElement.png Benjamin Franzke, 2023-08-25 09:11
chrome-web-component-cross-frame-render-properly.png (356 KB) chrome-web-component-cross-frame-render-properly.png Benjamin Franzke, 2023-08-25 09:14

Related issues 2 (0 open — 2 closed)

Related to TYPO3 Core - Task #100270: Streamline icon elementsClosed2023-03-23

Actions
Related to TYPO3 Core - Task #101464: Reactivate usage of constructable stylesheets for icon elementClosedBenjamin Franzke2023-07-27

Actions
Actions
Copy link
 #1

Updated by Benjamin Franzke 9 months ago

Actions
Copy link
 #2

Updated by Benjamin Franzke 9 months ago

  • Related to Task #101464: Reactivate usage of constructable stylesheets for icon element added
Actions
Copy link
 #3

Updated by Gerrit Code Review 9 months ago

  • Status changed from New to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/80667

Actions
Copy link Download all files
 #4

Updated by Benjamin Franzke 9 months ago

I need to reject this (myself) because of browser incompatibilities.
Firefox does not work at all for web components that are used cross frame boundaries, as the component object/implementation is adopted to the other-frames HTMLElement object and is therefore not usable.

I've created a simple demo that showcases the issue:
https://codepen.io/bnfr/pen/KKbdmjQ

Following a screenshot of the wrong behavior in Firefox. I tested v102esr, v115esr, v116 and v117 developer-build, all show the same behavior

Here a screenshot of the expected output as in Chrome:

Given this limitation it makes no sense to fix the current situation in chrome, as long firefox doesn't work at all.

Actions
Copy link

Also available in: Atom PDF