[FEATURE REQUEST] Preselect a trait select option

Hi @artf , thanks for your reply. Below is how I created the trait by extending the text model for the header component. 
The problem is not the syncronization. The problem is, when I'm adding complete layouts to the canvas, which are including h2 or h3 tags (or any others), and I'm clicking on them, the header type select in the settings (traits) always stays at "Headline 1", as this is the first option in the select and there's no possibility to give any of the select options the attribute 'selected'. 

	var txtType = domComps.getType('text');
	var txtModel = txtType.model;
	var txtView = txtType.view;
	domComps.addType('head', {
	
		model: txtModel.extend({
			defaults: Object.assign({}, txtModel.prototype.defaults, {
				tagName: 'h1',
				traits: [
					{
						type: 'select',
						label: 'Type',
						name: 'header-type',
						changeProp: 1,
						options: [
							{value: 'h1', name: 'Headline 1'},
							{value: 'h2', name: 'Headline 2'},
							{value: 'h3', name: 'Headline 3'},
							{value: 'h4', name: 'Headline 4'},
							{value: 'h5', name: 'Headline 5'},
							{value: 'h6', name: 'Headline 6'},
						]
					},
					'title'
				]
			}),

			init: function() {
				this.listenTo(this, 'change:header-type', this.updElem);
			},

			updElem: function() {
				var newElem = $('<div />').append($('<'+this.changed['header-type']+' />').append(this.view.el.innerText));
				this.view.model.set('content',newElem.html());
				this.view.el.innerHTML = newElem.html();
				this.attributes.tagName = this.changed['header-type'];
				editor.store();
			}
		},
		{
			isComponent: function(el) {
				if (el.tagName == 'h1' || el.tagName == 'h2' || el.tagName == 'h3' || el.tagName == 'h4' || el.tagName == 'h5' || el.tagName == 'h6')  {
					return {type: 'head'};
				}
			},
		}),

		view: txtView,
	});

For usability reasons it would be better to show the current settings there - for h2 tags logically 'Headline 2'. 
Below is how I solved that for now. I searched for the select using jQuery. However, that doesn't work as soon as the traits for one component are including several different select fields, because the trait name (or any other possible reference) is not part of the html output in the form of class names or attributes, so there's a leck of possibility to reference the correct select. Further on it would be much better to do this 'natively', as it is definitely the cleaner solution.

	editor.on('component:selected', function(arg) {
		if (arg[1].get('traits').where({name: 'header-type'}).length > 0)  {
			var tagName = arg[1].attributes.tagName;

			setTimeout(function () {
				$('div.gjs-trt-trait select').val(tagName);
			}, 0);
		}
	});