Estoy trabajando en nuevos componentes web para mi sitio, que funcionan bien solo con html/css. Sin embargo, no pude agregar algún tipo de funcionalidad de javascript a mi shadow DOM.

En mi caso, se trata de un botón dentro del componente, que debería activar una función que maneje el evento. Sin embargo, siempre recibo un error de que la función no está definida. Sé que el shadow DOM debería proteger el interior, pero no sé cómo implementar mi js correctamente. Espero que puedas ayudar :)

 class InfoSmall extends HTMLElement { // attributes constructor() { super(); // not important } // component attributes static get observedAttributes() { return ['']; } // attribute change attributeChangedCallback(property, oldValue, newValue) { if (oldValue == newValue) return; this[ property ] = newValue; }; connectedCallback() { const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <div class="container> <button id="copy"></button> </div>` shadow.querySelector('#copy').addEventListener("click", function () { // functionality }); } }

También probé el atributo onclick pero me pasó lo mismo: no se definió ninguna función. O también traté de escribir el script dentro del HTML interno con una etiqueta HTML...