how can I edit the style of a template-clone object? / object that will be created in the future?

document.addEventListener("DOMContentLoaded", ()=>{
    let template = document.querySelector(".template");
    let button = document.querySelector(".button");
    let screen = document.querySelector(".screen");
    button.addEventListener("click", ()=>{
    let template_clone = template.content.cloneNode(true);
    template_clone.style.background = "red";
    screen.appendChild(template_clone)
})})

I need to add an object to the screen that is a template clone and edit its style

<body>
    <button class="send">send</button>
    <div class="screen">
        <template class="template">
        <div class="box1"></div>
    </template>
    </div>       
</body>

if I try to edit the template_clone.style style it results in an error

undefined is not an object (evaluating 'template_clone.style.background = "red"')