From 0f417129657e04122bc7bf50f9d43e1920eda397 Mon Sep 17 00:00:00 2001
From: Tab Atkins Jr <jackalmage@gmail.com>
Date: Thu, 30 May 2024 10:35:10 -0700
Subject: [PATCH] Define "part-like pseudo-element", from #10083. (#10199)

* [css-pseudo] Define part-like pseudo-element. #10083

* [css-pseudo] Merge definitions into one section, and add example.
---
 css-pseudo-4/Overview.bs | 48 ++++++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 65b5fa8e1ce..f9b1fe5211f 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -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>
 
@@ -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: ”
@@ -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
@@ -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]]
@@ -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.