I have some javascript that moves the scroll bar to the bottom for a chat program I am building. It worked fine but I converted to a template with cloneNode and it no longer works. The DOM shows the scrollHeight on the element working and the querySelector is picking the correct element. I've also tried manually setting element.scrollTop to a number and it has no effect. Any ideas?

Here is my code.

            let message_template = document.getElementById('message_template');
            let message_clone = message_template.content.cloneNode(true);

            //Move scroller to bottom when clicked
            let myDiv = message_clone.querySelector(".chat-history");
            console.log('myDiv: '+myDiv.scrollHeight)
            myDiv.scrollTop = myDiv.scrollHeight;