Sp-textfield inside sp-popover always returned empty

Photoshop
1

I can’t get the values added to the sp-textfield inside the sp-popover. I also tried input type=“text”, which also returns empty. Could someone point me to a solution?

<sp-overlay >
    <div class="grButtons" style="width: 65px; height: 24px; " slot="trigger"> Presets</div>
    <sp-popover   id="presets_lista" offset="30" placement="bottom" alignment="center" appearance="none" slot="click">
            <div style="width: 350px; height: 200px; background-color: #fffefe; padding: 10px;"> 
                <label for="" style="color: #2b2b2b; margin-bottom: 5px;">Predefinições de Páginas</label>
                <div style="width: 100%; height: 60%; background-color: #494949; border: 1px solid #aaaaaa; border-radius: 5px; display: flex;  flex-direction: column; align-items: flex-end; padding: 15px;">
                        <div style=" display: flex; align-items: center;">
                            <label for="" style="color: #d4d4d4;">Nome Pag:</label>
                            <sp-textfield  type=text  id="nome_page"></sp-textfield>
                        </div>

                        <div style="display: flex; align-items: center;">
                        <label for="" style=" color: #d4d4d4;">URL Pag:</label>
                        <sp-textfield  type=text  id="url_Page" ></sp-textfield>
                    </div>
                </div>
                <div style="display: flex; align-items: center; justify-content: flex-end; background-color: #ffffff; margin-top: 10px;">
                    <div class="grButtons" style="width: 75px; height: 24px; " >Cancelar </div>
                    <div class="grButtons" style="width: 75px; height: 24px; " >Adicionar</div>
                    </div>
            
            </div>
    </sp-popover>
</sp-overlay>


js
let nomePage = document.getElementById("nome_page").value 
let urlPage = document.getElementById("url_Page").value 
console.log(nomePage)//// ""
console.log(urlPage) //// ""