Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does the shadow DOM replace ::before and ::after?

CSS Scoping says

The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.

CSS Pseudo-Elements describes ::before and ::after as

these pseudo-elements generate boxes as if they were immediate children of their originating element

So which of these is true?

  • First, all the contents of the shadow host (not including ::before and ::after) are replaced by the contents of the active shadow tree. And then, ::before and ::after generate boxes in the shadow host.
  • First, ::before and ::after generate boxes in the shadow host. And then, all the contents of the shadow host (including ::before and ::after) are replaced by the contents of the active shadow tree.

Firefox and Chrome do the former, but does the spec describe the behavior?

var root = document.querySelector('div').createShadowRoot();  root.innerHTML = "<p>Shadow content</p>";
div::before, div::after {    content: 'Generated content';  }
<div>Content</div>
like image 730
Oriol Avatar asked Jun 27 '15 23:06

Oriol


People also ask

How does shadow DOM and DOM work?

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which you can attach any element, in the same way as the normal DOM.

What is the purpose of the React shadow DOM?

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

What is shadow DOM in selenium?

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. Shadow DOM enables encapsulation. With Shadow DOM, a component can have its own “shadow” DOM tree that cannot be accidentally accessed from the main document.


2 Answers

CSS Scoping spec author here.

The answer is actually, officially... undefined!

I didn't think about this interaction when I was writing the Scoping spec. I'll send an email to the list, and we'll figure it out. Almost certainly, we'll settle on whatever browsers currently do (which appears to be letting ::before/after work "as expected" even in shadow hosts).

Edit: The Working Group's response was unanimous - the current implementation behavior (::before/after do work on shadow hosts) is how it should be. I'll edit it into the Scoping spec shortly.

like image 56
Xanthir Avatar answered Sep 28 '22 05:09

Xanthir


I think the key wording is in this part of the generated content section.

::before

Represents a styleable child pseudo-element immediately before the originating element’s actual content.

::after

Represents a styleable child pseudo-element immediately before the originating element’s actual content.

Excusing the obvious copy-paste error in the ::after description (it is a working draft), we can see that these pseudo-elements generate content outside, or "immediately before", the actual content of the element.

Compare this to this description from the Shadow Encapsulation section, it seems to confirm the behavior of Chrome and Firefox.

The descendants of a shadow host must not generate boxes in the formatting tree. Instead, the contents of the active shadow tree generate boxes as if they were the contents of the element instead.

In short, a shadow host replaces the actual contents of the element, and ::before and ::after generate pseudo-elements immediately before/after the elements actual content. Because the pseudo-elements create boxes outside the content being replaced, the content being replaced has no effect on the pseudo-elements.

like image 27
Alexander O'Mara Avatar answered Sep 28 '22 03:09

Alexander O'Mara