Bug 202217

Summary: Web Inspector: Regression: Shadow DOM elements are not visible
Product: WebKit Reporter: Tim Guan-tin Chien [:timdream] <timdream>
Component: Web InspectorAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: hi, inspector-bugzilla-changes, nvasilyev, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac   
OS: macOS 10.13   
Attachments:
Description Flags
screenshot none

Description Tim Guan-tin Chien [:timdream] 2019-09-25 11:52:43 PDT
Created attachment 379570 [details]
screenshot

STR:

1. Load this URL which insert an open shadow root under <body>

data:text/html,<script>window.onload%20=%20()%20=>%20{%20sr%20=%20document.body.attachShadow({mode:%20"open"});%20sr.innerHTML%20=%20"<div>Hello</div>";%20}</script>

2. Try to inspect the element containing the word "Hello"

Expected:

1. It shows up.

Actual:

1. It did not. The Shadow Root is not visible is not under <body>

Note:

Works on Released Safari (Version 13.0.1 (14608.2.11.1.11)), broken on STP 92.
It didn't consistently working for me in previous Safari versions but it has now consistently broken.
Comment 1 Radar WebKit Bug Importer 2019-09-25 11:53:12 PDT
<rdar://problem/55712964>
Comment 2 Devin Rousso 2019-09-25 12:00:04 PDT
Do you have the "Show shadow DOM nodes" navigation item enabled in the Elements Tab?  It looks very roughly like <<>>.
Comment 3 Tim Guan-tin Chien [:timdream] 2019-09-25 12:04:10 PDT
(In reply to Devin Rousso from comment #2)
> Do you have the "Show shadow DOM nodes" navigation item enabled in the
> Elements Tab?  It looks very roughly like <<>>.

Ouch. I didn't. Sorry. Is the toggle on or off by default? Did I accidentally turn it off?
Comment 4 Devin Rousso 2019-09-25 12:05:37 PDT
(In reply to Tim Guan-tin Chien [:timdream] from comment #3)
> (In reply to Devin Rousso from comment #2)
> > Do you have the "Show shadow DOM nodes" navigation item enabled in the Elements Tab?  It looks very roughly like <<>>.
> 
> Ouch. I didn't. Sorry. Is the toggle on or off by default? Did I accidentally turn it off?
No worries!  Better to have it be a mistake than it be broken :P

It should be on by default as of r246821 <https://webkit.org/b/199128>.
Comment 5 Nikita Vasilyev 2019-09-25 13:54:48 PDT
Why do we even have this setting? Can it always be enabled? If I don't want to look inside of the Shadow DOM roots, I simply won't expand them.
Comment 6 Devin Rousso 2019-09-25 14:30:06 PDT
(In reply to Nikita Vasilyev from comment #5)
> Why do we even have this setting? Can it always be enabled? If I don't want to look inside of the Shadow DOM roots, I simply won't expand them.
It can be useful to turn off if you want to see what JavaScript/CSS would see if it were trying to work with the DOM tree (e.g. `querySelectorAll` or any selector).