Как используя shadow DOM, подключить внешнюю функцию?

Question

[Nerubik]

Только начал разбираться в пользовательских элементах и столкнулся с проблемой, что при переиспользовании элемента мои внешние функции не могут использоваться (они привязываются к первому созданному). Нашел, что теневое дерево решает такие проблемы, но никак не могу добиться результатов в этом. К тому же, при подключении shadow DOM, внешние функции перестали срабатывать и на первый элемент (причину этого уже понял).

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

			render() {
				let html = document.importNode(myWebCompTemplate.content, true);
				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')
			}

			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>