🤔 How to: Símbolos y identificaciones

Pregunta

@artf Los elementos con un ID en los símbolos tienen diferentes ID en las distintas instancias del símbolo. Tiene sentido porque es malo tener varios elementos con el mismo ID en un documento HTML

Número 1

Los usuarios que tienen un símbolo en diferentes páginas se confunden porque los estilos que "añaden" a un ID de elemento se "pierden". ¿Se te ha ocurrido una forma limpia de solucionar esto en este caso?

Número 2

Otro caso de uso problemático es cuando tengo múltiples apariciones de un símbolo, con dentro de él

un elemento con un ID
una referencia a este ID, por ejemplo, '<etiqueta for="the-id">'

Soluciones

Entonces se estropea y no hay forma de que funcione, ¿verdad? Por desgracia, tengo otros casos de uso similares. Para esos casos, estoy pensando en implementar una solución alternativa en mi plugin 'grapesjs-symbols' (un envoltorio alrededor de símbolos, con UI, etc.), detectaría que un símbolo está pegado o duplicado y cambiaría las referencias a los IDs dentro del símbolo, pero no estoy seguro de si el atributo 'for' se sincronizará y luego cambiará en todas partes... ¿Qué opinas?

Edito: Lo intenté y parece funcionar bien para el "Número 2"

el código para esta "solución alternativa"

demo online del plugin con la solución alternativa

Tras estos problemas, entiendo que los IDs no se abordarán a medio ni largo plazo, ¿verdad?

#6659
#4837

¡Gracias por tu ayuda!

Código de conducta

Acepto seguir el Código de Conducta de este proyecto

Respuestas (1)

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @lexoyo.

Buena pregunta sobre Símbolos y DNIs. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!

Símbolos y identificaciones

Pregunta

Número 1

Número 2

Soluciones

Código de conducta

Respuestas (1)

Preguntas y respuestas relacionadas

Actualización: ¿cómo actualizar las plantillas antiguas a la versión más reciente?

Los símbolos se rompen al cargar páginas progresivamente (las instancias pierden __symbol enlace)

Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.

¿Quita getHtml() la propiedad de estilo en línea?

Plugins de pago que cumplen con este problema

Explorar categorías de plugins