Как разделить веб-компоненты на отдельные файлы и загрузить их? ⇐ Html

[Anonymous]

У меня есть счетчик x веб-компонента, который находится в одном файле.

Код: Выделить всё

const template = document.createElement('template');
template.innerHTML = `

button, p {
display: inline-block;
}

-
0
+
`;

class XCounter extends HTMLElement {
set value(value) {
this._value = value;
this.valueElement.innerText = this._value;
}

get value() {
return this._value;
}

constructor() {
super();
this._value = 0;

this.root = this.attachShadow({ mode: 'open' });
this.root.appendChild(template.content.cloneNode(true));

this.valueElement = this.root.querySelector('p');
this.incrementButton = this.root.querySelectorAll('button')[1];
this.decrementButton = this.root.querySelectorAll('button')[0];

this.incrementButton
.addEventListener('click', (e) => this.value++);

this.decrementButton
.addEventListener('click', (e) => this.value--);
}
}

customElements.define('x-counter', XCounter);

Здесь шаблон определен как использующий JavaScript, а содержимое HTML добавляется как встроенная строка. Есть ли способ разделить шаблон на файл x-counter.html, например, css, x-counter.css и соответствующий код JavaScript на xcounter.js и загрузить их в index.html?

В каждом примере, который я просматриваю, есть смешанные веб-компоненты. Мне хотелось бы иметь разделение задач, но я не знаю, как это сделать с компонентами. Не могли бы вы предоставить пример кода? Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/550 ... -load-them