Bug 160538 - slotted() pseudo does not work with ID selector
Summary: slotted() pseudo does not work with ID selector
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2016-08-03 20:57 PDT by Eric
Modified: 2016-11-04 11:35 PDT (History)
5 users (show)

See Also:


Attachments
repro of #id::slotted not working (611 bytes, text/html)
2016-08-03 20:57 PDT, Eric
no flags Details
patch (10.33 KB, patch)
2016-11-04 10:08 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff
patch (10.47 KB, patch)
2016-11-04 10:56 PDT, Antti Koivisto
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Eric 2016-08-03 20:57:45 PDT
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+
Comment 1 Radar WebKit Bug Importer 2016-09-28 19:04:31 PDT
<rdar://problem/28534529>
Comment 2 Ryosuke Niwa 2016-09-28 19:06:38 PDT
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.
Comment 3 Antti Koivisto 2016-11-04 10:08:45 PDT
Created attachment 293893 [details]
patch
Comment 4 Antti Koivisto 2016-11-04 10:56:47 PDT
Created attachment 293902 [details]
patch
Comment 5 WebKit Commit Bot 2016-11-04 11:35:44 PDT
Comment on attachment 293902 [details]
patch

Clearing flags on attachment: 293902

Committed r208390: <http://trac.webkit.org/changeset/208390>
Comment 6 WebKit Commit Bot 2016-11-04 11:35:49 PDT
All reviewed patches have been landed.  Closing bug.