0
302
Viewsmy-component.js: 24 TypeError no detectado: window.open no es una función
Creé un componente web simple usando Vanilla js con solo hacer clic para abrir la URL en una nueva ventana, lamentablemente aparece el siguiente error
my-component.js:24 Uncaught TypeError: window.open is not a function
Aquí está mi componente web:
export class MyComponent extends HTMLElement { constructor() { super(); } connectedCallback() { this._render(); this._attachEventHandlers(); } _render() { const container = document.createElement("div"); container.innerHTML = ` <div class='app'> <button id="open-me">Open</button> </div>`; const shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.appendChild(container); } _attachEventHandlers() { this.shadowRoot.getElementById('open-me').addEventListener('click', () => { window.open('www.google.com', "_blank"); }) } } window.customElements.define("my-component", MyComponent);uso de este componente, solo importe en su HTML y agréguelo así
<my-component></my-component>¿Que esta mal aquí?
·
Juan Pablo Isaza
1 answers
Answer question0
Yo lo acortaría a:
customElements.define("my-component", class extends HTMLElement { constructor() { let button = document.createElement("button"); button.innerText = "open"; button.onclick = (evt) => { alert("You clicked! " + evt.target.nodeName); open('www.google.com', "_blank"); }; super().attachShadow({mode:"open"}) .append(button); } }); <my-component></my-component>- No es necesaria una definición de clase con nombre, cuando la usa solo una vez
- no es necesario
export, el componente web se crea en el registro global - No hay necesidad de la sopa
div, a menos que realmente tengan un propósito. -
addEventListenersolo es necesario cuando desea varios eventos en el mismo elemento -
window.paracustomElements,alertyopenno son necesarios;
estamos en el navegador, el valor predeterminado eswindow -
superconjuntos Y devuelve el ámbito 'este'; por lo que puede ser encadenado -
attachShadowestablece Y devuelvethis.shadowRoot; por lo que puede ser encadenado - Aprenda el poder de
appendsobreappendChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Su problema open no puede estar relacionado con los componentes web; verifique esa declaración sin procesar, en la consola.
Aquí en StackOverflow dice:
Posdata por comentarios
OP fue responsable de anular window.open él mismo.
·
Juan Pablo Isaza
Report
Answer question