Skip to content

Commit

Permalink
Define "part-like pseudo-element", from w3c#10083. (w3c#10199)
Browse files Browse the repository at this point in the history
* [css-pseudo] Define part-like pseudo-element. w3c#10083

* [css-pseudo] Merge definitions into one section, and add example.
  • Loading branch information
tabatkins authored May 30, 2024
1 parent 42213b0 commit 0f41712
Showing 1 changed file with 39 additions and 9 deletions.
48 changes: 39 additions & 9 deletions css-pseudo-4/Overview.bs
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>,
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>

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

0 comments on commit 0f41712

Please sign in to comment.