Ordenación del selector con id y selectores de clase, espacio después del selector de id

Actualmente estoy trabajando en una aplicación web para la que integramos este proyecto como editor de interfaz gráfica para personalizar los entornos.

Nuestros componentes GUI se cargan y analizan desde la base de datos. Podemos identificar, por ejemplo, un botón, una cuadrícula de datos, etc., mediante un ID (por ejemplo, '_17190fbd-13d6-430f-bb32-1a09d2151a77'). Estos componentes se construyen a partir de varios elementos HTML anidados mediante un framework que añade clases para el estilo.

Mi objetivo ahora es acceder a estos elementos internos de GrapesJS con algo como '#ancestor-id .framework-class1.framework-class2' (por ejemplo, '#_17190fbd-13d6-430f-bb32-1a09d2151a77 .my-text-label')

Añado los selectores de id a cada elemento anidado después de cargar el lienzo:

'allComponents.forEach((component: any) => {' ' const ancestorId = this.getAncestorId(component);' ' const idSelector = selectorManager.add('#${ ancestorId }');' ' selectores const = component.getSelectors();' ' selectors.add(idSelector);' });

Mi problema ahora es que los selectores de clase aparecen antes de mi selector de Ancestor-ID. Esto da lugar a un selector completo como '.my-text-label#_17190fbd-13d6-430f-bb32-1a09d2151a77' en lugar de '#_17190fbd-13d6-430f-bb32-1a09d2151a77 .my-text-label' con el espacio entre el id y las clases.

¿Alguien tiene idea de dónde o cómo podría cambiar este comportamiento?

Muchas gracias por tu apoyo.