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.
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.
(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*
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.
(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.
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.
*** Bug 160866 has been marked as a duplicate of this bug. ***
*** Bug 160864 has been marked as a duplicate of this bug. ***
Created attachment 289874 [details] patch
Created attachment 289880 [details] patch
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.
> Why do we need this? The loop below is harmless even without this special > case. We don't. Removed the test.
https://trac.webkit.org/r206403