0
162
VistasEl elemento de formulario HTML personalizado con Shadow DOM proporciona una página html en blanco
El código es de esta página https://usefulangle.com/post/362/custom-elements Construye un elemento de formulario html personalizado con shadow DOM.
Pero, cuando lo abro en un navegador, está en blanco. 
Abrí el código en "Inspeccionar" y vi este error.
class InputPlusMinus extends HTMLElement { constructor() { super(); let template = document.querySelector('#input-plus-minus-template').content; this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true)); let add_button = this.shadowRoot.querySelector("#add"); let subtract_button = this.shadowRoot.querySelector("#subtract"); let count_textbox = this.shadowRoot.querySelector("#count"); this.setAttribute('value', '1'); add_button.addEventListener('click', () => { let current = parseInt(count_textbox.value, 10); count_textbox.value = current + 1; this.setAttribute('value', count_textbox.value); }); subtract_button.addEventListener('click', () => { let current = parseInt(count_textbox.value, 10); if (current > 1) { count_textbox.value = current - 1; this.setAttribute('value', count_textbox.value); } }); } } customElements.define('input-plus-minus', InputPlusMinus); <template id="input-plus-minus-template"> <style> button { width: 25%; /* other CSS */ } input { width: 50%; /* other CSS */ } </style> <div id="container"> <button id="subtract">-</button> <input type="text" id="count" value="1" readonly /> <button id="add">+</button> </div> </template> <!-- custom element being used --> <input-plus-minus id="sample"></input-plus-minus>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Según los comentarios, modifiqué el código y ahora funciona. ¡¡Muchas gracias!!
class InputPlusMinus extends HTMLElement { connectedCallback() { let template = document.querySelector('#input-plus-minus-template').content; this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true)); let add_button = this.shadowRoot.querySelector("#add"); let subtract_button = this.shadowRoot.querySelector("#subtract"); let count_textbox = this.shadowRoot.querySelector("#count"); this.setAttribute('value', '1'); add_button.addEventListener('click', () => { let current = parseInt(count_textbox.value, 10); count_textbox.value = current + 1; this.setAttribute('value', count_textbox.value); }); subtract_button.addEventListener('click', () => { let current = parseInt(count_textbox.value, 10); if (current > 1) { count_textbox.value = current - 1; this.setAttribute('value', count_textbox.value); } }); } } customElements.define('input-plus-minus', InputPlusMinus); <template id="input-plus-minus-template"> <style> button { width: 25%; /* other CSS */ } input { width: 50%; /* other CSS */ } </style> <div id="container"> <button id="subtract">-</button> <input type="text" id="count" value="1" readonly /> <button id="add">+</button> </div> </template> <!-- custom element being used --> <input-plus-minus id="sample"></input-plus-minus>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta