<!DOCTYPE HTML>
<html class="focus-within">
<head>
<style>
    * {
        border: none;
    }
    .focus-within {
        border: 2px solid green;
    }
</style>
</head>
<body class="focus-within">
    <div id="root" class="focus-within">
    </div>
    <script>
        let rootElement = document.getElementById('root');
        let firstRoot = rootElement.attachShadow({mode: 'closed'});
        let insideDiv = document.createElement("div");
        insideDiv.innerText = "Foobar";
        insideDiv.className = "focus-within";
        let inputElement = document.createElement("input")
        inputElement.className = "focus-within";
        insideDiv.appendChild(inputElement);
        firstRoot.appendChild(insideDiv);
        inputElement.focus();
    </script>
</body>
</html>