Skip to content

[css-shadow-parts][css-scoping] Is ::slotted() allowed after ::part()? #10807

@dbaron

Description

@dbaron

The ::part spec says that all pseudo-elements are allowed after ::part(). This includes ::slotted(), although it's a bit difficult to make it work, and it's not clear to me that it's useful.

Gecko and Chrome currently don't accept ::slotted() after ::part() (also see #10786). WebKit does, but it doesn't appear to match in cases where I think it ought to (if I'm doing it right!).

See this testcase, where my theory is that all of the border, color, and background styles should work:

<!DOCTYPE HTML>
<style>
  #host::part(main) { display: block; border: medium solid green; }
  #host::part(main)::slotted(.item) { background: lime }
</style>
<div id="host">
  <template shadowrootmode="open">
    <style>
      slot[part="main"]::slotted(.item) { color: orange }
    </style>
    <slot part="main"></slot>
  </template>
  <p class="item">One</p>
</div>

Should this work?

(The "is it syntactically valid" aspects of this decision, pending #10786, also apply to part-like pseudo-elements, although it probably would never work for any of them.)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Friday afternoon

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions