AdoptStylesheet not supported in grapesJS

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;
          })
        }
      },
    }
});

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

Thanks for reporting this, @GaikwadShubham.

The issue with AdoptStylesheet not supported in grapesJS appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report