BUG: AdoptStylesheet not supported in grapesJS

[GaikwadShubham]

Version:

You can get the version by typing grapesjs.version into the console
0.17.22

Are you able to reproduce the bug from the demo?

• Yes
• No

What is the expected behavior?
Should be able to see the web component in similar fashion as it is outside the grapesJS container

Describe the bug detailed
Grapesjs not able render the css from constructable stylesheet.

What is the current behavior?
Able to load the component without styling

Are you able to attach screenshots, screencasts or a live demo?

• Yes (https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark)
• No

CodeSandbox Starter template https://codesandbox.io/embed/frosty-payne-3fhd7?fontsize=14&hidenavigation=1&theme=dark

[artf]

This issue is due to how AdoptStylesheet works and it's similar to this one from lit-element.
Basically, you can't share the same CSSStyleSheet across multiple documents, so you have to recreate it manually, here below is a code for custom elements, in order to support adoptedStyleSheets.

editor.Components.addType('custom-element', {
    isComponent: (el) => (el.tagName || '').includes('-') && window.customElements.get(el.tagName.toLowerCase()),
    view: {
      init() {
       // On init, the element is still part of the main document, so 
       // the original adoptedStyleSheets still exists
        const shadowStyles = this.el?.shadowRoot?.adoptedStyleSheets;
        if (shadowStyles) {
         // By using setTimeout we'll jump on the step when the element is already rendered
         // in the iframe document, here shadowRoot.adoptedStyleSheets is cleared
          setTimeout(() => {
            // We need to use the window of the iframe in order to 
            // avoid "stylesheets in multiple documents is not allowed" error
            const win = this.el.ownerDocument.defaultView;
            const adoptedStyles = shadowStyles
              .map(s => Array.from(s.cssRules).map(r => r.cssText || '').join('\n'))
              .map(css => {
                const cssSheet = new win.CSSStyleSheet();
                cssSheet.replaceSync(css);
                return cssSheet;
              })
            this.el.shadowRoot.adoptedStyleSheets = adoptedStyles;
          })
        }
      },
    }
});

[vasicvuk]

Is there any solution for using lit-element components 3.X with grapesJS?