Почему теневой хост получает фокус, даже если значение elementsFocus является ложным? ⇐ Html

[Anonymous]

Рассмотрим следующий пример:

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

let template = document.querySelector('.quote-template').innerHTML;
let shadowElement = document.querySelector('.quote-app');
let shadow = shadowElement.attachShadow({
mode: 'open'
});

shadow.innerHTML = `

.quote {
font-family: Arial;
font-size: 20px;
padding: 25px 40px;
background-color: #000;
font-weight: 300;
line-height: 24px;
color: #fff;
margin-bottom: 15px;
}
.quote:focus {
color: red;
}

${template}
`;
console.log(document.querySelector('.quote-app').shadowRoot.delegatesFocus)

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

.quote-app:focus {
outline: 2px dotted red;
}

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

Use mouse right click on the test button and you will see red outline on the shadow root.
Test focus

Как вы можете заметить, когда кнопка «тестовый фокус» получает фокус, родительский теневой хост также получает стили :focus. В документах MDN говорится, что

Если true(delegatesFocus), при нажатии на не фокусируемую часть теневого DOM фокус передается первой фокусируемой части, а теневому хосту присваивается любой доступный стиль :focus.

Ничего не говорится о том, когда фокусируемый часть фокусируется. Здесь, в моем сценарии, значение elementsFocus ложно, почему теневой хост получает стиль :focus?

P.S: Наблюдаемое поведение противоречит документации google web.dev. Они упоминают:

Если бы вы установили elementsFocus: false, вместо этого вы бы увидели следующее:



Внешний черный пунктирный контур на самом деле становится красным, что противоречит изображение.

Подробнее здесь: https://stackoverflow.com/questions/735 ... eing-false