1449953 - Decide where ::before should be displayed under a host element

Status: RESOLVED INVALID

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

Follow up to Bug 1053898.

If a host element has after/before pseudos and an attached shadow root, should it be displayed as :

host 
  before
  shadowroot
  direct-children
  after

or (as done in Bug 1053898)

host 
  shadowroot
  before
  direct-children
  after

Comment 1

[Julian Descottes [:jdescottes]]

Here is a test page for this issue: https://juliandescottes.github.io/webcomponents-playground/pseudo-under-host-element/

Comment 2

[Julian Descottes [:jdescottes]]

Actually I think the only alternative that would make sense would be to display pseudo-elements around the shadowroot, rather than around the "direct children". When you consider what is rendered, those elements are really before and after the shadowDOM.

So I would say, either we keep the current approach (consistent with Chrome's current implementation)

<host-component>
  #shadow-root
  ::before
  <div child1>
  ...
  <div childN>
  ::after
  
or we do:

<host-component>
  ::before
  #shadow-root
  ::after
  <div child1>
  ...
  <div childN>

Comment 3

[Belén [:ladybenko]]

We are sticking to what Chrome is doing for now. Might reconsiderate if we receive feedback about this.