Recientemente noté que no se llama a un setter en un componente web cuando inyecta el archivo javascript del componente web con una etiqueta de secuencia de comandos donde se usa el atributo defer . Puede ver el código aquí: https://codesandbox.io/s/web-component-with-setter-1ij4o
Dentro de la etiqueta de script de index.html , establecí la propiedad foobar en "test". Esto debería activar el configurador del componente web, que debería imprimir el valor "prueba" en la pantalla mediante un comando de alerta. Pero esto no sucede. Si elimina el atributo de defer , todo funciona como se esperaba. ¿Puede decirme por qué sucede esto y tiene una solución en la que se llama al setter sin eliminar el atributo defer ?
Lo que sucede es que su secuencia de comandos en línea se ejecuta antes que la secuencia de comandos diferida.
Puede resolver esto colocando su secuencia de comandos en línea en un archivo y cargándolo con el atributo diferido O colocando el código en línea dentro de un detector de eventos para que se ejecute después del evento 'DOMContentLoaded'.
document.addEventListener('DOMContentLoaded', () => { const wc = document.querySelector("custom-text"); wc.foobar = "test"; });