Как изменить элемент в пользовательском компоненте?

Question

[Nerubik]

Только начал изучать пользовательские компоненты и shadow DOM. Появилась такая проблема, что я создаю лисенер к Test и без проблем получаю значения из внешних элементов (в данном случае из select), но никак не могу понять как записать их в теневые.

class MyElement extends HTMLElement {
			constructor() {
				super();
			}

			render() {
				let html = document.importNode(myWebCompTemplate.content, true);
				let Test = document.querySelector("#typeId")
				this.attachShadow({ mode: 'open' })
				this.shadowRoot.appendChild(html);
				let colorNew = {
					name: this.getAttribute('name') || undefined,
					type: this.getAttribute('type') || undefined,
					color: this.getAttribute('color') || undefined
				}
				this.shadowRoot.querySelector('.name').textContent = this.getAttribute('name')
				this.shadowRoot.querySelector('.type').textContent = this.getAttribute('type')
				this.shadowRoot.querySelector('.color').textContent = this.getAttribute('color')
				Test.addEventListener("click", function (e) {
					console.log(Test.value)
				})
			}

			connectedCallback() {
				if (!this.rendered) {
					this.render();
					this.rendered = true;
				}
			}

			disconnectedCallback() {

			}

			static get observedAttributes() {
				return ['name', 'type', 'color'];
			}

			attributeChangedCallback(name, oldValue, newValue) {
				this.render()
			}
		}
		customElements.define("my-webcomp", MyElement);

<template id="myWebCompTemplate">
		<p class="name"></p>
		<p id='type'
			class="type"></p>
		<p class="color"></p>
	</template>
	<my-webcomp name="Серый хомяк"
		type="main"
		color="#3f3f3f"
		id="myWebComp">
	</my-webcomp>