Bug 160538 – slotted() pseudo does not work with ID selector

• Component: DOM
• Status: RESOLVED FIXED

[Eric]

Created attachment 285300 [details]
repro of #id::slotted not working

Prefixing `::slotted()` with an #id selector does apply the styling.

Repro: http://jsbin.com/qetofazevu/edit?html,output

  <nav>
    <span>Hello</span>
    <span>world</span>
  </nav>

  <template>
    <style>
      #s::slotted(*) {
        background: red;
      }
    </style>
    <slot id="s"></slot>
  </template>

  <script>
    var t = document.querySelector('template');
    t.content.cloneNode(true);
    var nav = document.querySelector('nav');
    nav.attachShadow({mode:'open'}).appendChild(t.content.cloneNode(true));
  </script>

Notes: 
- using `::slotted(*)` and `slot::slotted(*)` does apply the styling.
- repro works in Chrome 53+

[Radar WebKit Bug Importer]

<rdar://problem/28534529>

[Ryosuke Niwa]

It looks like replacing #s::slotted(*) by .s::slotted(*) and adding class="s" to the slot element fixes the problem.  So there's something about the style selector or collector that doesn't like using #s and ::slotted together.

[Antti Koivisto]

Created attachment 293893 [details]
patch

[Antti Koivisto]

Created attachment 293902 [details]
patch

[WebKit Commit Bot]

Comment on attachment 293902 [details]
patch

Clearing flags on attachment: 293902

Committed r208390: <http://trac.webkit.org/changeset/208390>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.