Propiedades de rasgos que cambian dinámicamente

Hola, revisé las otras preguntas que he publicado aquí y no conseguí que funcionara.

Solo necesito acceder a un rasgo específico de un componente concreto (o seleccionado) y establecer algunos de sus atributos. Por defecto pongo el rasgo en display: none y cuando hago algo de lógica de servidor el rasgo obtiene un valor y se muestra al usuario.

Hice esto:

var blockManager = editor. Jefe de bloque;
	var domComps = editor. DomComponents;
	var dType = domComps.getType('default');
	var dModel = dType.model;
	var dView = dType.view;
	
Añadir componentes
	loadComponents (editor, opciones);

Añadir bloque de navegación
	blockManager.add('NAVIGATE_SCREEN', {
		id: 'iniciarTrabajo',
		etiqueta: 'Navegar a pantalla',
		contenido:{
			contenido:'<div class="mi-bloque fa fa-pincha">nombre de usuario</div>',
			tipo:'NAVIGATE_SCREEN'
		},
	});
	
Rasgos componentes
	domComps.addType('NAVIGATE_SCREEN', {
		model: dModel.extend({		
			defaults: Object.assign({}, dModel.prototype.defaults, {
				Rasgos: [
					{
						tipo: 'screenID',
						etiqueta: 'ID de pantalla',
						nombre: 'screenID',
						atributos: {estilo: 'display: ninguno'}
					},
					{
						tipo: 'screenName',
						etiqueta: 'Nombre de usuario',
						nombre: 'screenName',
						atributos: {estilo: 'display: ninguno'}
					},
					{
						tipo: 'screenSelectorButton',
						etiqueta: 'Haz clic para seleccionar',
						nombre: 'ScreenSelector'
					},		  
				], 
			}),
		}, {
		  isComponent: function(el) {
			if(el.tagName == 'INPUT'){
			  return {type: 'input'};
			}
		  },
		}),

vista: dVista,
	});
	
extender screenSelectorButton
	editor. TraitManager.addType('screenSelectorButton', {
		eventos: {
			'click': 'selectScreen', // activa el método onclick del padre al hacer clic
		},
		
selectScreen: function(){
			var flowTemplate = prompt("nombre de usuario: ");
			Implementación
			NavToHomeScreenOpenOpenPopup(); Llama al aviso falso
             Implementar - Actualizar el valor del rasgo después de la selección:
		domComps.addType('NAVIGATE_SCREEN', {
		model: dModel.extend({		
			defaults: Object.assign({}, dModel.prototype.defaults, {
				Rasgos: [
					{
						tipo: 'screenID',
						etiqueta: 'ID de pantalla',
						nombre: 'screenID',
						atributos: {estilo: 'display: ninguno'}
					},
					{
						tipo: 'screenName',
						etiqueta: 'Nombre de usuario',
						nombre: 'screenName',
						atributos: {estilo: 'display: ninguno'}
					},
					{
						tipo: 'screenSelectorButton',
						etiqueta: 'Haz clic para seleccionar',
						nombre: 'ScreenSelector'
					},		  
				], 
			}),
		}, {
		  isComponent: function(el) {
			if(el.tagName == 'INPUT'){
			  return {type: 'input'};
			}
		  },
		}),

vista: dVista,
	});
		},
		getInputEl() {
            var button = document.createElement('button');
            button.id = 'btnScreenSelector';
			button.classList.add('actionButton');
            button.appendChild(document.createTextNode('Seleccionar una pantalla'));
			
botón de retorno;
		
},
	});

código para configurar vía jQuery
obtener el rasgo de nombre de usuario en el contexto actual, cambiar su valor
var screenNameEl= document.querySelector('.gjs-trt-trait input[type=\'screenName\']');
screenNameEl && grapesjs.$(screenNameEl).val('" + OrgScreen.Name + "').trigger('change');

obtén el padre gjs-trait de screenNameEl y ponlo en visualización
solo cambia los componentes del DOM, pero no del editor
var screenNameElParentDiv = $('.gjs-field-screenName').parents('div[class^=\'gjs-trt-trait\']').eq(0);
screenNameElParentDiv.css('pantalla', 'flex');

Básicamente, necesito poder acceder al rasgo tipo de nombre de usuario y cambiar sus atributos (valor, estilo, etc.) para que se refleje en el almacenamiento local.

Gracias.