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

I have been playing with a Custom Web Component and have stumbled upon a curious effect I have not seen before and cannot solve the issue.

The web-component takes user clicks ( on either alpha chars, numbers or punctuation ) and appends to a textarea. This aspect works OK until manually adding content to the textarea via keyboard input. Once characters have been added in this manner what one observes in the textarea and what one can see when inspecting the textarea using the dev tools are different. Furthermore no input from the web-component input elements register within the displayed data in the textarea but DO register within the console view.

This has me puzzled so I hope the StackOverflow hive-mind can deduce what I cannot from this. The snippet should also exhibit this same behaviour. Any ideas?

A series of screenshots showing effect described: All OK at this stage

All appears OK – sort of

Cannot explain this discrepency

After clicking “input elements” – no visible display difference

A greatly simplified example still exhibits this behaviour with focus and display discrepency.

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>

Essentially I am more interested in finding why input from the web-component “input elements” fails to register once manual input has happened.

Answer

I didn’t look at your code, only ran the Code Snippet

I typed: abc
then clicked the Letter button
clicked: def

Looks like you are adding typed letters not like you add clicked letters

Clicked letters end up in lightDOM and are not reflected to shadowDOM
(because <textarea> does not have a <slot>)

The Why is in your code somewhere.

Advertisement

Answer