Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
dbaron opened this issue Aug 30, 2024 · 0 comments
Open

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

dbaron opened this issue Aug 30, 2024 · 0 comments
Labels
Agenda+ F2F css-scoping-1 Current Work css-shadow-parts-1

Comments

@dbaron
Copy link
Member

dbaron commented Aug 30, 2024

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.)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ F2F css-scoping-1 Current Work css-shadow-parts-1
Projects
TPAC 2024
Status: TPAC/FTF agenda items
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dbaron