Bug 202217 - Web Inspector: Regression: Shadow DOM elements are not visible
Summary: Web Inspector: Regression: Shadow DOM elements are not visible
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: Safari Technology Preview
Hardware: Macintosh macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-09-25 11:52 PDT by Tim Guan-tin Chien [:timdream]
Modified: 2019-09-25 14:30 PDT (History)
4 users (show)

See Also:


Attachments
screenshot (759.97 KB, image/png)
2019-09-25 11:52 PDT, Tim Guan-tin Chien [:timdream]
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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).