[Meta] Web Inspector: Add support for Shadow DOM

• Component: Web Inspector (Deprecated)
• Status: RESOLVED INVALID

[Dimitri Glazkov (Google)]

This is an umbrella bug covering all issues related to exposing shadow DOM and component model APIs in Inspector.

[Dimitri Glazkov (Google)]

This would be a good place to accumulate use cases that we would like to address with respect to Inspector and the Component Model. If you have ideas, please fire away.

[Dimitri Glazkov (Google)]

For a while, there are going to be two slightly different types of shadow DOM: the User Agent shadow DOM (WebKit implementation details) and the Author shadow DOM.

The UA shadow DOM must be completely immutable. I am not opposed to it being not visible by default (a checkbox?)

The author shadow DOM should be mutable and act just like normal elements, thought it might be nice to differentiate it visually.

The author should be able to create and remove shadow DOM from the inspector.

The author should be able to add a content element (http://codesearch.google.com/codesearch#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/dom/ShadowContentElement.h developing here) to shadow DOM.

[Patrick Mueller]

I think I understand the concept of "shadow DOM", but don't know the specifics.  I have no idea what "component model APIs" are.  Could you provide some links for both of these?

[Dimitri Glazkov (Google)]

(In reply to comment #3)
> I think I understand the concept of "shadow DOM", but don't know the specifics.  I have no idea what "component model APIs" are.  Could you provide some links for both of these?

Shadow DOM primer (first google result on "shadow DOM", yesss!): http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Component Model APIs are the set of JS APIs that we will expose to allow Web developers create their own chunks of shadow DOM (components). The spec is under development, earlier version here: http://dev.w3.org/2006/xbl2/

[Timothy Hatcher]

Shamelessly copied from https://bugs.webkit.org/show_bug.cgi?id=62188#c22:

I would find it useful to see them. I've often had to guess when I'm styling pseudo elements like ::-webkit-search-decoration. I assume that element would be in the shadow DOM and I could see it and tweak styles directly instead the reload churn I have today.

That said, I think it should be hidden by default with a switch to show them. The switch should be in the Inspector UI somewhere and be toggleable.

Another option: show the shadow DOM elements if their corresponding CSS pseudo elements are styled by the developer specifically (like my example above.) That shows the auto knows about them and would likely want to see them (maybe always see them in this case.) Otherwise the Inspector is really hiding info from the author who is using an advanced WebKit feature.

[Adam M-W]

I would also like to see them, it would make it a world easier than the current guess-and-check method applied to styling UA shadow DOM, for example the media elements, e.g. http://jsfiddle.net/adammw/BeLdy/ Media Element's Shadow DOM is very complex and hard to understand without being able to inspect it.
And if there is to be work on authored shadow DOM it wouldn't make sense to have one without the other.

[Dimitri Glazkov (Google)]

Now that Shadow DOM is enabled behind flag and there are actually developers experimenting with this, what can we do to make this happen?

[Pavel Feldman]

(In reply to comment #7)
> Now that Shadow DOM is enabled behind flag and there are actually developers experimenting with this, what can we do to make this happen?

I picked https://bugs.webkit.org/show_bug.cgi?id=78202.

[Brian Burg]

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.