Skip to content

Define "part-like pseudo-element", from #10083. #10199

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

Merged
merged 2 commits into from
May 30, 2024
Merged

Define "part-like pseudo-element", from #10083. #10199

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a16dbc
[css-pseudo] Define part-like pseudo-element. #10083
tabatkins Apr 11, 2024
d0f0f42
[css-pseudo] Merge definitions into one section, and add example.
tabatkins Apr 12, 2024
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 39 additions & 9 deletions css-pseudo-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1140,13 +1140,39 @@ Security and Privacy Considerations</h3>
the styling of such highlighted segments.

<h2 id="treelike">
Tree-Abiding Pseudo-elements</h2>
Tree-Abiding and Part-Like Pseudo-elements</h2>

<dfn export lt="tree-abiding|tree-abiding pseudo-element">Tree-abiding pseudo-elements</dfn> always fit within the box tree.
They <a lt="inheritance">inherit</a> any inheritable properties from their <a>originating element</a>;
non-inheritable properties take their <a>initial values</a> as usual.
[[CSS-CASCADE-4]]

A subset of [=tree-abiding pseudo-elements=],
the <dfn>part-like pseudo-elements</dfn>,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure I like this name. Can we pick something that isn't a reference to ::part()?
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, would love a different name, but having a problem coming up with one. Problem is coming up with something that's not just a synonym of "abiding". We could try to skirt a little farther in the "Tree-X" namespace - tree-located? tree-positioned? tree-structural?- to indicate that not only do they abide by the tree structure generally (insofar as having a parent/child relationship) but actually have a definite position in that tree (and thus know their sibling relationships too).

Or we could go further afield. Semi-real? Pseudo-real?
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Tree-structural" is actually really grabbing me, given its parallel with the tree-structural pseudo-classes.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well ::marker has a definite position in the tree, but you're not including it in this set of things afaict. So it's not about it's tree position, it's about the fact that generates a box that behaves exactly like any other element's generated box.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was under the impression that the reason ::marker didn't act like ::before/etc is because we specifically hadn't nailed down its exact tree position. If it does have an exact position, then what is the reasoning behind limiting it? (Besides applying a few one-offs, like disallowing it from being display: list-item or something; that's fine for this new category of pseudos to do.)
have slightly stronger requirements:
they act as if they have a well-defined location in the document tree.
This enables them to interact with some other platform features
as if they were real elements.

<div class=example>
For example, a [=part-like pseudo-element=]
can be used in the <{html-global/exportparts}> attribute,
to masquerade as a ''::part()''
for the component it's in:

<xmp class=html>
<template id=custom-element-template>
<p exportparts="::before : preceding-text">
You can style my ::before pseudo-element
by using ::part(preceding-text), too!
</template>
</xmp>
</div>

Comment on lines +1157 to +1171
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't helping to illustrate pseudo-elements that "interact with some other platform features as if they were real elements". It's illustrating a real element acting like a pseudo-element (by being selected by one), which is kindof the opposite!
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you're misunderstanding the example, because it illustrates the exact opposite. ::part(preceding-text) is selecting a pseudo-element (the p::before pseudo).
Unless otherwise specified,
any CSS property that applies to elements
applies to [=part-like pseudo-elements=].

<h3 id="generated-content">
Generated Content Pseudo-elements: ''::before'' and ''::after''</h3>

Expand All @@ -1165,10 +1191,9 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h3>
immediately after the <a>originating element</a>'s actual content.
</dl>

These pseudo-elements can be styled
exactly like any normal document-sourced element in the document tree;
all properties that apply to a normal element
likewise apply to ''::before'' and ''::after''.
Both ''::before'' and ''::after''
are [=part-like pseudo-elements=];
there is no restriction on what properties apply to them.

<div class="example">
For example, the following rule inserts the string “Note: ”
Expand Down Expand Up @@ -1206,7 +1231,9 @@ List Markers: the ''::marker'' pseudo-element</h3>

ISSUE: Interaction of ''::marker'' and ''::first-line'' is currently under discussion in <a href='https://github.com/w3c/csswg-drafts/issues/4506'>Issue 4506</a>.

Only a limited set of properties can be used on the ''::marker'' pseudo-element.
''::marker'' is a [=tree-abiding pseudo-element=],
but not [=part-like pseudo-element|part-like=];
only a limited set of properties can be used on the ''::marker'' pseudo-element.
This list is defined in [[css-lists-3#marker-properties]].

The ''::before::marker'' or ''::after::marker'' selectors
Expand All @@ -1229,6 +1256,7 @@ Placeholder Input: the ''::placeholder'' pseudo-element</h3>
For example, a date-input field
might have the placeholder text “YYYY/MM/DD”
to clarify that numeric dates are to be entered in year-month-day order.
It is a [=tree-abiding pseudo-element=].

<div class="example">
For example, according to the semantics of [[HTML]]
Expand Down Expand Up @@ -1266,9 +1294,11 @@ Placeholder Input: the ''::placeholder'' pseudo-element</h3>
<h3 id="file-selector-button-pseudo">
File Selector Button: the ''::file-selector-button'' pseudo-element</h3>

The <dfn>::file-selector-button</dfn> pseudo-element targets the ''&lt;button>''
inside an ''&lt;input>'' element with <code>type=file</code>, if the UA
renders such a button.
The <dfn>::file-selector-button</dfn> pseudo-element
targets the ''&lt;button>''
inside an ''&lt;input>'' element with <code>type=file</code>,
if the UA renders such a button.
It is a [=part-like pseudo-element=].

There is no restriction on which properties apply to the
''::file-selector-button'' pseudo-element.
Expand Down