Почему моя кнопка Shadow DOM (tabindex="0") получает фокус после обычной кнопки (tabindex="10") и как это исправить? ⇐ CSS

[Anonymous]

Я пытаюсь гарантировать, что кнопка внутри теневого DOM получит фокус табуляции раньше, чем обычная кнопка в основном DOM. одна кнопка имеет tabindex="0", а другая — 10, но обычная кнопка вне тени всегда фокусируется первой.

Код: Выделить всё

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 `;

Подробнее здесь: https://stackoverflow.com/questions/793 ... lar-button