Почему скрытые функции, такие как обратные вызовы, зарегистрированные с помощью `addEventListener("input, ...")` в моих ⇐ Html

[Anonymous]

Надеюсь, этот фрагмент говорит сам за себя: большая часть магии (хотя и довольно несовершенной) происходит в conntectedCallback(). По сути, если вы введете текст в первое текстовое поле в самом верху, вы увидите строку, выводимую на консоль. Но при вводе во второе редактируемое текстовое поле (которое, в отличие от первого, вложено в другой веб-компонент), ничего не печатается.
Будем очень признательны за любые мысли и подсказки.

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

class HtmlGenMachinery extends HTMLElement {
disconnectedCallback() {
console.log("disconnectedCallback for '" + String(this.tagName) + "' element");
}
attributeChangedCallback() {
console.log("attributeChangedCallback for '" + String(this.tagName) + "' element");
}
adoptedCallback() {
console.log("adoptedCallback for '" + String(this.tagName) + "' element");
}
constructor() {
super();
console.log("constructor for '" + String(this.tagName) + "' element");
this.attachShadow({ mode: "open" });
}
connectedCallback() {
console.log("connectedCallback for '" + String(this.tagName) + "' element");
setTimeout(() => {
console.log("connectedCallback setTimeout lambda for '" + String(this.tagName) + "' element");

// Parse html
this.sourceHtml = this.sourceHtml
.replaceAll('{shadowRoot}', '(el{id}.shadowRoot)')
.replaceAll('¤%&/📍$', '`')
.replaceAll('¤%&/🧭$', '')
.replaceAll(`{content}`, this.innerHTML);
if (this.sourceHtml.includes('el{id}')) {
this.sourceHtml = "var el{id}=document.getElementById('{id}');" + this.sourceHtml;
}
for (const argStr of this.arguments) {
if (Array.isArray(argStr)) {
this.sourceHtml = this.sourceHtml.replaceAll(`{${argStr[0]}}`, this.getAttribute(argStr[1]));
} else {
this.sourceHtml = this.sourceHtml.replaceAll(`{${argStr}}`, this.getAttribute(argStr));
}
}

const newContent = document.createRange().createContextualFragment(this.sourceHtml);
this.shadowRoot.appendChild(newContent);
}, 0)
}
}
class HtmlGen extends HtmlGenMachinery { sourceHtml = `{content}`; arguments = []; }
window.customElements.define('f-html-gen', HtmlGen);
class HtmlGen_Box extends HtmlGenMachinery {
sourceHtml = `{content}`; arguments = ["color"];
}
window.customElements.define('f-html-gen-box', HtmlGen_Box);
class HtmlGen_StringProperty extends HtmlGenMachinery {
sourceHtml = `{text}


let el={shadowRoot}.getElementById("propertyParagraph");
console.log("howdy from {id} shadowRoot: " + String(Object.getOwnPropertyNames({shadowRoot})));
setTimeout(()=>{
console.log("Latent message from {id}");
},0)
el.addEventListener("input", function() {
console.log("Contents of {id} is ->\\n" + el.innerHTML + "

Подробнее здесь: [url]https://stackoverflow.com/questions/79322259/why-are-latent-functions-such-as-callbacks-registered-with-addeventlisteneri[/url]