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?
Lee la respuesta completa abajo ↓Pregunta
¿Qué intentas añadir a GrapesJS? Mejor soporte para Shadow DOM, que permite a los desarrolladores renderizar GrapesJS dentro de un elemento Shadow sin tener que pasar elementos específicamente en lugar de selectores en la configuración. Describe tu solicitud de función detallado Cuando actualmente se usan selectores de elementos, GrapesJS simplemente utiliza el selector de consultas de documentos. Esto no funciona al renderizar dentro de un DOM de sombra, ya que el documento no es la raíz de sombra. Me gustaría poder definir una raíz sombra para que todo lo que GrapesJS haga o necesite esté c...
Respuestas (4)
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...
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 conc...
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:upd...
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #3525
HAZAÑA: En el Gestor de Estilos, permite que requiera la configuración predeterminada
¿Qué intentas añadir a GrapesJS? La propiedad CSS 'float' solo tiene sentido para 'posición: estática;' elementos, que resulta ser el valor...
Issue #3269
Traducción de cadenas HTML
¡Gran biblioteca! Cumple todos los requisitos excepto uno: la traducción de texto para sitios web. He buscado por todas partes en la cola d...
Issue #3392
HAZAÑA: Permitir una configuración dinámica droppable usando una función
Tengo un requisito que me permite usar selectores para determinar si un elemento es soltable. Por ejemplo: ! imagen El componente "hijo" de...
Issue #3407
HAZAÑA: Cuadrícula CSS
¿Qué intentas añadir a GrapesJS? Añadir soporte para CSS Grid ('display: grid;') y sus diversas opciones. No tengo una necesidad personal i...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.