JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<div id="wrap" class="inputwrapper password"><input id="pw" type="password" value=""></div>

CSS

INPUT {
    background: gold;
    display: block;
}
div.inputwrapper:after {
    content: attr(data-wrapped-value);
    background-color: transparent;
    width: 200px;
    display:block;
    position:relative;

    z-index: 22;
    
}

JavaScript

Element.implement({
    syncWithWrapper : function() {
        console.log(this);
        
       
        this.addEvents({
            keyup: function(){
                this.getParent('.inputwrapper').set( 'data-wrapped-value', this.get('value') );
            }
        });
        
        
    }
});
$$('INPUT').each(function(itm,idx){
    itm.syncWithWrapper();
});