| <!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> |