Warum werden latente Funktionen, wie z. B. Rückrufe, die mit „addEventListener("input, ...")" in meinen verschachtelten ⇐ HTML

[Guest]

Hoffentlich ist das Snippet selbsterklärend, der größte Teil der (wenn auch etwas gebrochenen) Magie geschieht in connectectedCallback(). Wenn Sie in das erste Textfeld ganz oben etwas eingeben, sehen Sie im Wesentlichen, dass eine Zeichenfolge an die Konsole ausgegeben wird. Aber wenn Sie etwas in das zweite bearbeitbare Textfeld eingeben (das im Gegensatz zum ersten in einer anderen Webkomponente verschachtelt ist), wird nichts gedruckt.
Alle Gedanken oder Hinweise wären sehr willkommen.

Code: Select all

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 + "