В чем разница между :focus-within и :has(:focus)? [закрыто] ⇐ CSS

[Anonymous]

Недавно я заметил, что :focus-within можно [по-видимому] полностью заменить на :has(:focus). Что мне кажется интересным, так это то, что они оба были добавлены на уровне 4 спецификации, так есть ли между ними разница, которую я пропустил?
Читая MDN, я обнаружил одно отличие, в котором :focus-within должен работать с элементами теневого dom, прямая цитата: «Это включает в себя потомков в теневых деревьях», но я не могу заставить это работать.
Фактическая спецификация подтверждает мое тестирование, как говорится «... псевдокласс применяется к ..., а также к элементу (или псевдоэлементу), чей потомок в плоском дереве (включая узлы, не являющиеся элементами, такие как текстовые узлы) соответствует условиям сопоставления :focus.", что прямо противоречит MDN (поскольку нет упоминания о теневом дереве).
Одно из реальных различий, которые я обнаружил, это :focus-within, также включает элемент, на котором вы фокусируетесь. Но «внутри» подразумевает «дочерние элементы», а не «текущий элемент и его дочерние элементы». Если вам нужно, чтобы он соответствовал «текущему элементу и его дочерним элементам», вы можете использовать &:focus, &:has(:focus) (также можно использовать :is(), если вы не используете вложенность CSS). Такое предложение будет более логичным/лингвистичным, чем :focus-within.
Пример:
Примером использования :focus-within и примером кода того, как :has(:focus) может полностью заменить его, будет замечательная функция специальных возможностей «Перейти к основному содержимому».
HTML: Перейти к content или нижний колонтитул
CSS (:focus-within):

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

.skip-link {
transform: translateY(-100%);

&:focus-within {
transform: translateY(0%);
}
}

CSS (:has(:focus)):

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

.skip-link {
transform: translateY(-100%);

&:has(:focus) {
transform: translateY(0%);
}
}

Есть ли между ними какие-либо другие различия? Нажмите здесь, чтобы получить ответ.


Подробнее здесь: https://stackoverflow.com/questions/786 ... d-hasfocus