Web Components javascript ecmascript6

im working in aminiproyect. I have to modify an input with web components. I have modified the input (talking about style) but the behavior i cant do it. When i want to get the value that is writting in the input text it return me undefined, I dont know why... I fcan someone can help me or, can recommend me a book o a good PDF becauso this is new for me.

This is what i have: When i call the getValue funct, it return me unedefiend, i Dont know wy.

HTML:

    <input-mejorado></input-mejorado>
    <center><button id="verify">Verificar input</button></center>


    <script type="text/javascript">

    class inputVerification extends HTMLElement{

        constructor(){
            super();
            //this.addEventListener('blur',gettingValues);
        }

        connectedCallback(){ //cuando se mete en el dom, se inicia

            var shadowFuncion = this.attachShadow({mode: 'open'}); 

                shadowFuncion.innerHTML =   
                `<div>
                <center> 
                <style>
                    input{
                        background-color: orange;
                        font-size: 150%;
                    }
                </style>

                <input type="text">
                <br>Hola, este es un webComponent modificado!<br>
                </center>
                </div>`
                ;

                this.addBlurListener();
        }

        addBlurListener() {
            this.addEventListener('blur', e=>{
                this.getValue();
                //alert("holas");
            });
        }

        getValue(){
            var valor = document.querySelector('input');
            if(valor==5){
                alert("Si agarra el numero");
            }else{
                alert("no hay vida");
            }
        }


    } //final


        window.customElements.define('input-mejorado',inputVerification);
        //document.createElement('input','input-mejorado');

</script>