Заменяет ли тень DOM:: before и:: after?

CSS Scoping говорит

Потомки теневого хоста генерируйте поля, как если бы они были содержимым элемента.

Псевдоэлементы CSS описывает ::before и ::after как

эти псевдоэлементы генерируют ящики, как если бы они были немедленными дети их происхождения

Итак, кто из них верен?

  • Во-первых, все содержимое теневого хоста (не включая ::before и ::after) заменяется содержимым активного дерева теней. И затем, ::before и ::after генерируют поля в теневом хосте.
  • Сначала ::before и ::after генерируют поля в теневом хосте. И затем все содержимое теневого хоста (включая ::before и ::after) заменяются содержимым активного теневого дерева.

Firefox и Chrome делают первое, но специфицирует ли спецификация поведение?

var root = document.querySelector('div').createShadowRoot();
root.innerHTML = "<p>Shadow content</p>";
div::before, div::after {
  content: 'Generated content';
}
<div>Content</div>

Ответы

Ответ 1

Обозреватель CSS Scope здесь.

Ответ на самом деле официально... undefined!

Я не думал об этом взаимодействии, когда писал форму Scoping. Я пришлю электронное письмо в список, и мы это выясним. Скорее всего, мы остановимся на том, что сейчас делают браузеры (что, кажется, позволяет до и после работы "как ожидается" даже в теневых хостах).

Изменить: ответ Рабочей группы был единодушным - текущее поведение реализации (до и после работы на теневых хостах) заключается в том, как это должно быть. Я скоро отредактирую его в спецификации Scope.

Ответ 2

Я думаю, что ключевая формулировка находится в этой части сгенерированной секции контента.

:: перед

Представляет псевдоэлемент элементарного стиля непосредственно перед фактическим содержимым исходных элементов.

:: после

Представляет псевдоэлемент элементарного стиля непосредственно перед фактическим содержимым исходных элементов.

Извиняя очевидную ошибку copy-paste в описании:: after (это рабочий проект), мы видим, что эти псевдоэлементы генерируют контент вне или непосредственно перед этим фактическое содержимое элемента.

Сравните это с этим описанием в разделе Shadow Encapsulation, он, похоже, подтверждает поведение Chrome и Firefox.

Потомки теневого хоста не должны генерировать поля в дереве форматирования. Вместо этого содержимое активного дерева тени генерирует поля, как если бы они были содержимым элемента.

Короче говоря, теневой узел заменяет фактическое содержимое элемента и:: before и:: после генерации псевдоэлементов непосредственно перед/после фактического содержимого элементов. Поскольку псевдоэлементы создают поля вне заменяемого содержимого, заменяемый контент не влияет на псевдоэлементы.