1495586 - Nested slot is hidden in Inspector

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Olli Pettay [:smaug][[e-mail]](vacation until Nov 16)]

Attachment: nested_slots.html

Per spec one can have nested slots
<slot name="foo"><slot name="bar"></slot></slot>
in shadow DOM.
Both of them can have assigned nodes.

The testcase seems to work fine in browsers, but FF devtools doesn't show that there is the inner slot.

Comment 1

[Julian Descottes [:jdescottes]]

The issue is not really about slotted nodes. The initial content of a <slot> is not rendered in the DevTools markup-view if it has slotted content.

A simpler example is:

Assuming "test-component" with the shadow dom:
  <slot>
    <span>initial slot content</span>
  </slot>

And the markup
  <test-component>
    <div>will be slotted</div>
  </test-component>

Then the inspector will show:
<test-component>
  #shadow-root
    <slot>
      -> div
    </slot>
  <div>will be slotted</div>
</test-component>

And indeed Chrome devtools are still showing the <span> under the <slot>. Is this objectively better, since <span> is not rendered anywhere in the tree? It's really not clear to me what the inspector should show. Should it be closer to the authored content or to the rendered content?

Comment 2

[Julian Descottes [:jdescottes]]

"The issue is not really about slotted nodes" -> "The issue is not really about nested slots" sorry...

Comment 3

[ExE Boss]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #1)
> The issue is not really about nested slots. The initial content of a <slot>
> is not rendered in the DevTools markup-view if it has slotted content.
> 
> A simpler example is:
> 
> Assuming "test-component" with the shadow dom:
>   <slot>
>     <span>initial slot content</span>
>   </slot>
> 
> And the markup
>   <test-component>
>     <div>will be slotted</div>
>   </test-component>
> 
> Then the inspector will show:
> <test-component>
>   #shadow-root
>     <slot>
>       -> div
>     </slot>
>   <div>will be slotted</div>
> </test-component>
> 
> And indeed Chrome devtools are still showing the <span> under the <slot>. Is
> this objectively better, since <span> is not rendered anywhere in the tree?
> It's really not clear to me what the inspector should show. Should it be
> closer to the authored content or to the rendered content?

I believe that displaying the following might be best:
```html
<test-component>
  #shadow-root
    <slot>
      -> div
      <span>initial slot content</span>
    </slot>
  <div>will be slotted</div>
</test-component>
```

With `<span>initial slot content</span>` being displayed the same as any other node with `display: none;`.

This is because the `<span>` element still exists as a child of the `<slot>` element, it just isn’t rendered as long as something is slotted into the `<slot>`.

Comment 4

[Olli Pettay [:smaug][[e-mail]](vacation until Nov 16)]

Devtools shouldn't hide (shadow) DOM content, IMO.