Warum erhält meine Shadow-DOM-Schaltfläche (tabindex="0") den Fokus nach der regulären Schaltfläche (tabindex="10") und ⇐ JavaScript

[Guest]

Ich versuche sicherzustellen, dass eine Schaltfläche in einem Shadow-DOM den Tab-Fokus vor einer regulären Schaltfläche im Haupt-DOM erhält. Eine Schaltfläche hat tabindex="0" und die andere ist 10, aber die reguläre Schaltfläche außerhalb des Schattens wird immer zuerst fokussiert.

Code: Select all

Document

button{
padding: 1%;
border-radius: 10px;
width: 100px;
height: 50px;

}
button:focus {
background-color: red;
}







focus me 


// set shadow root with button taindex 0
document.querySelector('#shdow').attachShadow({mode: 'open'}).innerHTML = `

button{
padding: 1%;
border-radius: 10px;
width: 100px;
height: 50px;

}
button:focus {
background-color: green;
}


focus me `;