[w3c/webcomponents] Styling default slot content with ::slotted (#631)

I've come across a case where a component wants to style default `slot` content with `::slotted`, but cannot do so.

For reference, default slot content are direct `slot` children, which are used if no light DOM nodes are assigned to the shadow host:

    <slot>
      <div>I'm default slot content</div>
    </slot>

Such default nodes are returned in calls to `assignedNodes({ flatten: true })`. (They are _not_ returned in calls to `assignedNodes()`, which seems weird to me, but that's a separate point.)

The puzzle is why the `div` above can't be styled with the `::slotted` selector. This use case is important for a component that wants to provide consistent styling for both default slot content _and_ explicitly assigned nodes.

See http://jsbin.com/cuvetul/edit?html,output for a demo whose behavior is consistent in both Blink and WebKit, and yet counter to what I would expect. My reasoning:

1. The algorithm to [find flattened slotables](https://dom.spec.whatwg.org/#find-flattened-slotables) includes a step which states, "If slotables is the empty list, then append each slotable child of slot, in tree order, to slotables." As I read this, it means the slot's children are counted as flattened, assigned nodes.
2. Invoking `assignedNodes({ flatten: true })` on a slot with no explicitly assigned nodes returns the default slot content. This is consistent with the above point.
3. The [::slotted spec](https://drafts.csswg.org/css-scoping-1/#slotted-pseudo) says, "The ::slotted() pseudo-element represents the elements assigned, after flattening, to a slot."
4. Using `::slotted` styles all flattened nodes assigned to a slot, which is consistent with the above point, _but not the slot's default nodes_, which is surprising.

(Disclaimer: I've done my best to locate what I believe are the most current specs, and interpret them to the best of my ability. That said, web specs usually melt my small brain. People with bigger brains may be able to interpret the above specs differently.)

I'm hitting this issue in a real-world Shadow DOM component that wants to apply consistent styling to a slot's assigned nodes in all cases.

If there's agreement that `::slotted` should apply to all of a slot's flattened assigned nodes, so that `::slotted` and `assignedNodes({ flatten: true })` can gain the close correspondence implied by the specs, then I'd be happy to file bugs against WebKit and Blink.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/631