How to add Event Listener to Web Component Template Elements

JavaScript
1

Hello all,

I’m building a Twitter clone with some added features for my portfolio. I’m using Web Component’s template tag to create the tweet template and then using importNode to render this into the DOM when the post tweet button is clicked. This works fine.

I added an edit button which should run a function when clicked:

         tweetTemplate.content.querySelector('#button').onclick = () =>{
            createTweetContainer.style.display = "block";
            console.log("edit button clicked");
        }

However, this does not work. The create tweet container should be visible when the button is clicked. I also want the button to be unique to each imported template as the user should be able to edit that specific tweet even though it’s the same template.

I’ve read multiple tutorials on web components, custom elements, shadow DOM etc. But I’m stuck on how to tie it all together for this specific task.

Any help on next steps is appreciated. Thank you.

JS FIDDLE: https://jsfiddle.net/manoj1234/zoL5s10g/12/