If Show Shadow DOM option is enabled in the inspector settings it shows ShadowRoots created by UA. For example tags like <video controls>, <datails>, <summary>, <input type="text"> contains build in ShadowRoot objects. Inspector shows them as #shadow-root. Problem is that when user creates Shadow roots they looks in the inspector exactly in the same way (as #shadow-root). It surprise users because they can see in the inspector additional ShadowRoots and treat them like a bug. Request is to show UA-created ShadowRoots in the different way, for example like #webkit-shadow-root
Created attachment 179854 [details] Patch
Comment on attachment 179854 [details] Patch Clearing flags on attachment: 179854 Committed r137979: <http://trac.webkit.org/changeset/137979>
All reviewed patches have been landed. Closing bug.
Comment on attachment 179854 [details] Patch I am not a fan of this change since $0.nodeName will not match the value in the elements panel now. We could do #shadow-root (internal) or #shadow-root (user agent) #shadow-root (webkit) instead.
(In reply to comment #4) > (From update of attachment 179854 [details]) > I am not a fan of this change since $0.nodeName will not match the value in the elements panel now. We could do #shadow-root (internal) or #shadow-root (user agent) #shadow-root (webkit) instead. Good point, we should pass shadow root origin as a separate property. This way nodeName will match the value in the console and can still show the origin in the Elements panel. Sergey, can you take care of this?
Thanks for taking care of this. Actually ShadowRoot.nodeName should return '#document-fragment' instead of '#shadow-root' (See Bug 104995). So if we would like to match nodeName and displayed name, we should show #document-fragment (shadow root) or something, I think. But showing '#shadow-root' might be user friendly... Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root?
> Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level.
(In reply to comment #7) > > Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? > > The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level. Hmm... OK. I would like to hear Dimitri's thought about how we show ShadowRoot in the elements tab.
(In reply to comment #8) > (In reply to comment #7) > > > Can someone choose a good name for displaying #shadow-root and #webkit-shadow-root? > > > > The point is that we should always display what is in $0.nodeName. So I'd rather have this patch rolled out and fixed on the DOM level. > > Hmm... OK. > > I would like to hear Dimitri's thought about how we show ShadowRoot in the elements tab. Context for Dimitri: I think inspector should render shadow root titles as: node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(user agent)" : "") Today that would be: #shadow-root (user agent) or #shadow-root If you change the nodeName for roots in the future, inspector will update its display name accordingly.
> Hmm... OK. Sorry? If you think it is confusing / have an opinion on this one, please speak up.
(In reply to comment #10) > > Hmm... OK. > > Sorry? If you think it is confusing / have an opinion on this one, please speak up. As a web developer, I would like to see string 'shadow-root' somewhere. just showing 'document fragment' seems confusing. So, I would like to see something like this: node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(useragent shadow root)" : "(shadow root)") # Note that ShadowRoot.nodeName should be '#document-fragment'.
(In reply to comment #11) > (In reply to comment #10) > > > Hmm... OK. > > > > Sorry? If you think it is confusing / have an opinion on this one, please speak up. > > As a web developer, I would like to see string 'shadow-root' somewhere. just showing 'document fragment' seems confusing. > > So, I would like to see something like this: > node.nodeName + " " + (shadowRootType == UserAgentShadowRoot ? "(useragent shadow root)" : "(shadow root)") > > # Note that ShadowRoot.nodeName should be '#document-fragment'. I defer to Inspector folks to find the right way to do visualize this. We do have a bug 104995, where we're showing "#shadow-root" as nodeName today, and that should be fixed soon, switching over to "#document-fragment". This will make displaying shadow root a bit more challenging, but perhaps it just need to be addressed with proper visualization. For instance, instead of showing nodeName, put some sort of a clickable badge/menu/etc. This particular change seems ill-fitting either way -- neither showing the current nodeName nor clearly explaining the distinction between UA/author shadow roots very well.
Re-opened since this is blocked by bug 105311
Closing as invalid, as this bug pertains to the old inspector UI and/or its tests. Please file a new bug (https://www.webkit.org/new-inspector-bug) if the bug/feature/issue is still relevant to WebKit trunk.