Created attachment 280594 [details] actual results - slotted elements are not rendered. I think I have found an issue with Shadow DOM and slotted elements not displaying in WebKit. I have a <slot> whose parent is hidden (display: none) and toggled later (display:block). When toggled, the elements that are distributed into the <slot> are not rendered. You have to force a layout/paint via devtools (toggle :active for example) for it to render the distributed elements. It looks like that WebKit is making an optimization where it knows initially the distributed elements are not visible so it doesn't layout the elements, however it doesn't then realise that the parent has been made visible so it doesn't force a layout and render of the elements. Demo: https://jsbin.com/cebura/latest Smallest test case: https://output.jsbin.com/jusuga/latest Expected: click the toggle button in Chrome canary with Experiemental web platform features enabled and you will see the distributed h1 is rendered Actual (WebKit): click the toggle button, nothing rendered. Go to devtools and for a layout (I click :active on the slot and you will see it render)
Created attachment 280595 [details] Smallest test case H1 should display when the toggle is clicked.
Created attachment 280596 [details] Expected results
Created attachment 280625 [details] Reduction
Toggling the class name on #container doesn't dirty the slot (FAIL shows up). <div><div id="container"><slot name="green">FAIL</slot></div></div> It works if we remove the outer-most div.
Looks like http://trac.webkit.org/changeset/202227 didn't fix this bug.
https://trac.webkit.org/changeset/206403 fixed this bug. Let's add a test.
Created attachment 290045 [details] Adds a test
Comment on attachment 290045 [details] Adds a test Thanks for the fast review!
Comment on attachment 290045 [details] Adds a test Clearing flags on attachment: 290045 Committed r206493: <http://trac.webkit.org/changeset/206493>
All reviewed patches have been landed. Closing bug.