Input elements don't work inside shadow tree

• Component: DOM
• Status: RESOLVED FIXED

[Monica Dinculescu]

Created attachment 285045 [details]
Shows that the input has a value but the text doesn't render

If I have a <div><slot></slot></div> inside a shadow root, distributing an <input> in that slot leads to weird rendering issues (see below). Note that if the <slot> is a direct child of the shadow root (i.e. not nested in that <div>) everything is fine.

Repro: http://output.jsbin.com/fuduvi 
1. There are two inputs, one is distributed in a slot, one is a shadow child.
2. Type something in an input. Nothing actually shows up.
3. Inspect the input. It’s got a value. Toggle a style on that input (such as :focus), and the text shows up.

[Ryosuke Niwa]

Wow, it looks like any form of mutations to the style or text is completely ignored inside shadow trees unless we insert or remove a node.

[Ryosuke Niwa]

(In reply to comment #1)
> Wow, it looks like any form of mutations to the style or text is completely
> ignored inside shadow trees unless we insert or remove a node.

I mean inside slots*

[Eric]

Just want to confirm if https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/0bfc15abcf835a0b17e2d97df12ea8cde884faa7/fancy-tabs-demo.html is the same issue. Selecting a tab applies a `selected` attribute to the tab and panel content. It looks like the distributed nodes are not seeing a style recalc.

If this is a different but, happy to file a new issue.

[Ryosuke Niwa]

(In reply to comment #3)
> Just want to confirm if
> https://rawgit.com/ebidel/2d2bb0cdec3f2a16cf519dbaa791ce1b/raw/
> 0bfc15abcf835a0b17e2d97df12ea8cde884faa7/fancy-tabs-demo.html is the same
> issue. Selecting a tab applies a `selected` attribute to the tab and panel
> content. It looks like the distributed nodes are not seeing a style recalc.
> 
> If this is a different but, happy to file a new issue.

Yeah, this seems like the same bug.

[Ryosuke Niwa]

I'm so sorry. This is a terrible bug :(

For now, you can work around it by running:

var originalValue = shadowHost.style.display;
shadowHost.style.display = 'none'; // Any value different from the current one would do.
getComputedStyle(shadowHost).color; // Any property would do.
shadowHost.style.display = originalValue;

This would force style recall on the entire shadow tree.

[Ryosuke Niwa]

*** Bug 160866 has been marked as a duplicate of this bug. ***

[Ryosuke Niwa]

*** Bug 160864 has been marked as a duplicate of this bug. ***

[Antti Koivisto]

Created attachment 289874 [details]
patch

[Antti Koivisto]

Created attachment 289880 [details]
patch

[Darin Adler]

Comment on attachment 289880 [details]
patch

View in context: https://bugs.webkit.org/attachment.cgi?id=289880&action=review

> Source/WebCore/dom/ComposedTreeIterator.cpp:183
> +    if (m_contextStack.size() == 1) {
> +        ASSERT(context().iterator == context().end);
> +        return;
> +    }

Why do we need this? The loop below is harmless even without this special case.

[Antti Koivisto]

> Why do we need this? The loop below is harmless even without this special
> case.

We don't. Removed the test.

[Antti Koivisto]

https://trac.webkit.org/r206403