Как правильно обрабатывать пользовательский элемент Javascript (веб-компонент) с дочерними элементами? ⇐ Html

[Anonymous]

У меня есть пользовательский элемент , который должно иметь много детей HTML. У меня была эта проблема при ее инициализации в конструкторе класса (результат не должен иметь детей). Я понимаю, почему и знаю, как это исправить. Но как именно я должен спроектировать свой класс вокруг него сейчас? Пожалуйста, рассмотрите этот код: < /p>

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

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

// Due to the problem, these codes that should be in constructor are moved here
connectedCallback() {
// Should have check for first time connection as well but ommited here for brevity
this.innerHTML = ``;
this.a = this.querySelector("a");
this.div = this.querySelector("div");
}

set myText(v) {
this.a.textContent = v;
}

set url(v) {
this.a.href = v;
}
}

customElements.define("my-el", MyElement);

const frag = new DocumentFragment();
const el = document.createElement("my-el");
frag.append(el); // connectedCallback is not called yet since it's not technically connected to the document.

el.myText = "abc"; // Now this wouldn't work because connectedCallback isn't called
el.url = "https://www.example.com/";

Поскольку myelement будет использоваться в списке, он установлен заранее и вставлены в документ -фрагмент . Как вы справляетесь с этим? Я также подумал о другом решении: Иметь метод init (ну, я только что понял Не видел ни одного компонента, который должен это сделать, и он похож на слабость обновления < /code>, упомянутая в приведенной выше статье: < /p>

Атрибуты элемента и Дети не должны быть проверены, как в случае с обновлением, никто не будет присутствовать, а полагаться на обновления делает элемент менее полезным.


Подробнее здесь: https://stackoverflow.com/questions/737 ... children-e