Warum erhält meine Shadow-DOM-Schaltfläche (tabindex="0") den Fokus nach der regulären Schaltfläche (tabindex="10") und
Posted: 19 Jan 2025, 19:45
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 `;