Not able to render web component in grapesJS container for lit-element 3.0

[GaikwadShubham]

Description

I have created a web-component using lit and trying to render it in grapesJS container.
The component is rendering successfully in the grapesJS container in deprecated lit-element versions [2.4.0, 2.5.1].
But as we move to latest lit-element versions (3.0.0 and above) it is giving Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed as the error.

Live Reproduction Link

CodeSandbox : https://codesandbox.io/embed/musing-grothendieck-9hved?fontsize=14&hidenavigation=1&theme=dark

Expected Results

Should be able to successfully render the web-component in grapesJS container for higher version of lit-element

Actual Results

Error : Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed

Browsers Affected

Only using Chrome and Edge. And the above error is present in both

[justinfagnani]

It sounds like grapeJS might be moving components across iframe boundaries. Is there any way to confirm that?

[GaikwadShubham]

Hi @justinfagnani. Yes, grapesJS is moving the components into its own created iframe.
As we can see in the Elements.

[justinfagnani]

Constructible stylesheets do not work across document boundaries like iframes. The best solution would be for grapeJS to define elements in the iframe that they will be in - by loading the scripts into that iframe. Short of a change to graphjs though, I think the best you can do is disable LitElement's usage of constructible stylesheets with:

delete document.adoptedStyleSheets;

[sriya-srinivasan]

Actually in grapesJS, we are recreating the style sheet manually, as shown here, so there is no crossing of document boundaries. So we are not sharing the stylesheet across documents. This was working perfectly for previous version of lit-element (2.x). The issue only arises when we directly use lit, or lit-element 3.x.

After going through the change log for lit-element (3.0.0), I think the error might be related to one of these changes:

• [Breaking] The createRenderRoot method is now called just before the first update rather than in the constructor. Element code can not assume the renderRoot exists before the element hasUpdated. This change was made for compatibility with SSR.

• [Breaking] LitElement's adoptStyles method has been removed. Styling is now adopted in createRenderRoot. This method may be overridden to customize this behavior.

If there is any info on why it is breaking now, the implications of the above changes, or if there is any work around to this, it would be great, since grapesJS and Constructible stylesheets are both important to the project.

[GaikwadShubham]

It sounds like grapeJS might be moving components across iframe boundaries. Is there any way to confirm that?

Constructible stylesheets do not work across document boundaries like iframes. The best solution would be for grapeJS to define elements in the iframe that they will be in - by loading the scripts into that iframe. Short of a change to graphjs though, I think the best you can do is disable LitElement's usage of constructible stylesheets with:

delete document.adoptedStyleSheets;

Hi @justinfagnani, I tried implementing the changes which you specified. But still getting the same error of 'AdoptedStyleSheet'