文本区域如何显示与使用自定义组件在控制台中显示的内容不同的内容？

Question

我一直在玩 Custom Web Component 并且偶然发现了一个我以前从未见过的奇怪效果并且无法解决问题。

网络组件接受用户点击（在字母字符、数字或标点符号上）并附加到文本区域。这方面工作正常，直到通过键盘输入手动将内容添加到文本区域。以这种方式添加字符后，在文本区域中观察到的内容与 inspecting 使用开发工具在文本区域中看到的内容不同。此外，没有来自 Web 组件输入元素的输入在文本区域的显示数据中注册，但在控制台视图中注册。

这让我感到困惑，所以我希望 Whosebug 的蜂巢思维可以推断出我无法从中推断出的东西。该片段也应该表现出同样的行为。有什么想法吗？

一系列展示效果截图说明：这个阶段一切正常

一切正常 - 有点

无法解释这种差异

单击“输入元素”后 - 无可见显示差异

一个大大简化的示例仍然表现出这种行为，但焦点和显示不一致。

class CharImp extends HTMLElement{
    constructor(){
        super();
        this.attachShadow( { mode:'open',delegatesFocus:true } );
    };
    create(t,a,p){
        let el = document.createElement( t );
        for( let x in a ) if( a.hasOwnProperty( x ) ) el.setAttribute( x, a[ x ] );
        if( a.hasOwnProperty('text') ) el.innerText=a.text;
        p.appendChild( el );
        return el;
    };
    connectedCallback(){
        const rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a );
        let text=this.create('textarea',{cols:100,rows:10},this.shadowRoot)
        let bttn=this.create('input',{ type:'button', value:'Add Input' },this.shadowRoot)
            bttn.addEventListener('click',(e)=>{
                text.textContent += String.fromCharCode( rand(65,90) );
            })
    };
}
window.customElements.define( 'char-imp', CharImp );

<char-imp></char-imp>

从本质上讲，我更感兴趣的是发现为什么一旦发生手动输入，来自网络组件“输入元素”的输入就无法注册。

Answer 1

我没有看你的代码，只看了运行代码片段

我输入了：abc
然后点击信件按钮
点击：def

看起来您添加的是键入的字母而不是您添加的是点击的字母

点击的字母最终进入 lightDOM 并且不会反射到 shadowDOM
（因为 <textarea> 没有 <slot>）

为什么 在您的代码中某处。

文本区域如何显示与使用自定义组件在控制台中显示的内容不同的内容？

How can a textarea display different content than shown in the console using Custom Component?

html

javascript

web-component