Text nodes are not distributed to default slot

[TomK]

When entering text nodes in the host element, they are not distributed to the default slot.

Live Demo

http://codepen.io/oridan/pen/rrgvQY?editors=1000

Expected Results

The live demo should show two rows as follows:
[Icon] item 1
[Icon] item 2

Actual Results

I see just two icons:
[Icon]
[Icon]

Browsers Affected

• Chrome
• Firefox
• [?] Edge
• Safari 9
• [?] Safari 8
• [?] IE 11

Versions

• Polymer: v1.7.0
• webcomponents: v0.7.22

[web-padawan]

In this case default slot gets shimmed to <content select=":not([slot])">, which seems not to work on anonymous nodes.

[TomK]

Unfortunately my PR fixes shady only. How would I go about resolving this failing test in shadow?

[kevinpschaaf]

Unfortunately we can't make a shady-only fix, so we can't take @TomK's solution.

I think we're going to resolve this by rolling back the automatic :not([slot]) selector for catch-all <slot>'s since it was a little too fancy trying to match the V1 changes to how default-slot is not take-all but rather only selects non-slotted nodes, and in the process broke textNode selection.

Instead, we'll just convert catch-all <slot>'s to catch-all <content>, and document that if the user is OK with not selecting textNodes, they can manually add the :not([slot]) selector and get more fidelity with V1.

[ChadKillingsworth]

Any update on this? It's a blocker for deploying 1.7 for us.

[TomK]

@ChadKillingsworth you should be able to convert all your <content select="..."> tags to <slot name="..."> tags, but leave any default <content> tags as they are until a fix is released.
I appreciate that this is not ideal as it means you will need to change them to slots for 2.0. However, It may be sufficient for your deployment in the meanwhile.

[ChadKillingsworth]

We can make that work for now. Thanks.

[dfreedm]

I think we have a workable strategy now.

Basically, there is no good way to transform this slot construction into content:

<slot></slot>
<div>Middle?</div>
<slot name="specific"></slot>

and keep text nodes working.

Instead, it will have to be up to the user to have the "fallback" slot last in the order, and if necessary, use flexbox or transform to move the visual DOM into the desired position.

Here's an example using flexbox ordering to simulate the above DOM: http://jsbin.com/kugudot/2/edit?html,output