AdoptStylesheet no soportado en grapesJS

Este problema se debe a cómo funciona AdoptStylesheet y es similar a este de lit-element. Básicamente, no puedes compartir la misma hoja CSSStyleSheet entre varios documentos, así que tienes que recrearla manualmente; aquí abajo tienes un código para elementos personalizados, para soportar adoptedStyleSheets.

'''js editor. Components.addType('custom-element', { isComponent: (el) => (el.tagName || '').includes('-') y & window.customElements.get(el.tagName.toLowerCase()), Vista: { init() { En init, el elemento sigue formando parte del documento principal, así que el StyleSheets original adoptado aún existe const shadowStyles = this.el?. ¿Raíz de sombra? adoptedStyleSheets; if (shadowStyles) { Usando setTimeout saltamos al paso cuando el elemento ya esté renderizado en el documento iframe, aquí se borra shadowRoot.adoptedStyleSheets setTimeout(() => { Necesitamos usar la ventana del iframe para Evitar el error "No se permite hojas de estilo en varios documentos" 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 = nueva victoria. CSSStyleSheet(); cssSheet.replaceSync(css); devolver cssSheet; }) this.el.shadowRoot.adoptedStyleSheets = adoptedStyles; }) } }, } });

¿Hay alguna solución para usar componentes lit-element 3.X con grapesJS?

Gracias por informar de esto, @GaikwadShubham.

El problema con AdoptStylesheet no soportado en grapesJS parece ser un problema de condición de carrera o de sincronización de gestión del estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

• Prueba con la última versión de GrapesJS si no lo has hecho
• Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
• Incluir errores de GrapesJS, de navegador y de consola en tu informe