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

[Anonymous]

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