Selected page is not displayed on Safari 11 when content comes from slot

[Torgen]

Description

When a component contains an iron-pages, and the content of the iron-pages is a slot, the selected page injected into the iron-pages from the light dom is not rendered.

Expected outcome

Selected page is rendered.

Actual outcome

No page is rendered. It seems that the :not(.iron-selected) selector captures the slot itself, changing its display to none and in so doing not displaying any of the elements that replace the slot. Changing it to :not(slot):not(.iron-selected) in the inspector seems to fix it.

Live Demo

https://output.jsbin.com/piqocih

Steps to reproduce

1. Create a custom element
2. Put an iron-pages in the custom element's template.
3. Set the content of the iron-pages to a slot.
4. Instantiate the custom element, passing elements that will be put in that slot.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [X] Safari 11
• [ ] Safari 10
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[Torgen]

Trying to put together an automated test, but Sauce doesn't yet support Safari 10.1, which adds a native Custom Elements implementation, so I can't get it to fail without my fix.

[Torgen]

Sauce has added support for Safari 11 on MacOS 10.12, so I'm renewing my efforts to make a test case that fails there.

[Torgen]

Manually tested on safari 11 and my jsbin has the same issue, but I haven't put together a test case that fails the same way. It would be surprising if the paper-tabs were required to make the failure happen.

[keanulee]

Related: https://bugs.webkit.org/show_bug.cgi?id=179402