HAZAÑA: Soporte mejorado para el DOM de las sombras

Hola @AStoker no entiendo cuál es el verdadero problema con tu ejemplo (aparte de no cargar estilos GrapesJS dentro de tu dom de sombras). Si estás añadiendo shadow dom, obviamente no puedes hacer este 'contenedor: '#gjs'', pero aún puedes pasar HTMLElements como ya haces en tu ejemplo, así que ¿cuál es el problema?

El problema es que debo pasar elementos HTML por todas partes y no puedo usar selectores. Esto puede volverse engorroso de escribir, ya que ahora debo usar el selector de consultas del Dom sombra para cada viñeta, cada elemento, cualquier cosa que conectemos a GrapesJS. Además, si existiera el concepto de contenedor, ayudaría significativamente a aislar GrapesJS de interferir accidentalmente con otras partes de una aplicación. A medida que más aplicaciones utilizan componentes y elementos personalizados, es importante un aislamiento adecuado entre componentes. El hecho de que GrapesJS automáticamente incorpore font-awesome (también de una CDN) en la raíz de la página no es lo ideal, ya que podría haber estilos muy conflictivos. Si usas Shadow DOM, podrías pasar el contenedor a GrapesJS y pondría font-awesome dentro del Shadow DOM, aislando adecuadamente los estilos de otras partes de la aplicación.

Actualicé el JSFiddle para que veáis lo que tenemos que hacer para conseguir estilos dentro de Shadow DOM. Pero, desafortunadamente, el CSS que GrapesJS añade automáticamente existe en el cuerpo y contamina las hojas de estilo globales y es inútil porque GrapesJS está dentro del DOM Shadow.

Gracias por informar de esto, @AStoker.

¡Gran sugerencia sobre FEAT: Soporte Mejorado del DOM en la Sombra! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.

Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });

**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad

**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo

El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.