В чем разница между :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) может заменить его, можно перейти к содержимому:

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

Skip to [url=#main]content[/url] or [url=#footer]footer[/url]

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

:focus-within)

:

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

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

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

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

:has(:focus)

:

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

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

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

Есть ли между ними другие различия?


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