嵌套Web组件中通过addEventListener注册的input回调等潜在函数未执行的问题求助

各位大佬好，我遇到一个自定义Web组件的问题，希望能得到大家的思路或者指点！

我写的代码片段应该能直观说明问题，大部分（虽然有点不完善的）核心逻辑都在connectedCallback()里。简单来说，页面最顶部的第一个可编辑文本框，输入内容时控制台会正常打印字符串；但第二个嵌套在另一个Web组件里的可编辑文本框，输入时控制台完全没反应。

下面是完整的代码：

<!DOCTYPE html>
<html>
<head>
    <script>
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('¤%&amp;/$', '`')
            .replaceAll('¤%&amp;/吝$', '</sc' + 'ript>')
            .replaceAll(`{content}`, this.innerHTML);
            if (this.sourceHtml.includes('el{id}')) {
                this.sourceHtml = "<script>var el{id}=document.getElementById('{id}');</sc" + "ript>" + 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 = `<div style="background-color: {color}">{content}</div>`; arguments = ["color"]; 
}
window.customElements.define('f-html-gen-box', HtmlGen_Box);
class HtmlGen_StringProperty extends HtmlGenMachinery {
    sourceHtml = `<blockquote><p contenteditable=true id=propertyParagraph>{text}</p></blockquote>
<script type="module">
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 + "<-\n");
    {changedCallback}
}, false);
¤%&amp;/吝$`; 
arguments = ["text", ["changedCallback","changed-callback"], "id"];
}
window.customElements.define('f-html-gen-string-property', HtmlGen_StringProperty);
class HtmlGen_Text extends HtmlGenMachinery { sourceHtml = `<p>{text}</p>`; arguments = ["text"]; }
window.customElements.define('f-html-gen-text', HtmlGen_Text);
    </script>
</head>

<body>
    <f-html-gen-string-property
    text="Latent functions here work just fine! To confirm this, try clicking on me and typing, then look in the console"
    id=f8d3c6b4c21754686 changed-callback="console.log('changed-callback');"></f-html-gen-string-property>
    <f-html-gen>
    <f-html-gen-box color=gray>
        <f-html-gen-text text="Lorum Ipsum"></f-html-gen-text>
    </f-html-gen-box>
    <f-html-gen-box color=gray>
        <f-html-gen-string-property
        text="However, when nested inside other webcomponents, latent functions stop working. Hence, if you try clicking on me and start tying, you wont see anything printed to the console!"
        id=dzd3b64lc13t56ki4 changed-callback="console.log('changed-callback');">
        </f-html-gen-string-property>
    </f-html-gen-box>
    </f-html-gen>
</body>
</html>

备注：内容来源于stack exchange，提问作者Willy Wonka