From 2a16dbc4a2a2a5ee5bc01e47e8bb2b4766221cdc Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Thu, 11 Apr 2024 13:48:08 -0700 Subject: [PATCH 1/2] [css-pseudo] Define part-like pseudo-element. #10083 --- css-pseudo-4/Overview.bs | 34 ++++++++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 65b5fa8e1ce..fa9ae9b58d1 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1147,6 +1147,20 @@ Tree-Abiding Pseudo-elements non-inheritable properties take their initial values as usual. [[CSS-CASCADE-4]] +

+Part-Like Pseudo-Elements

+ + A subset of [=tree-abiding pseudo-elements=], + the part-like pseudo-elements, + 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. + + Unless otherwise specified, + any CSS property that applies to elements + applies to [=part-like pseudo-elements=]. +

Generated Content Pseudo-elements: ''::before'' and ''::after''

@@ -1165,10 +1179,9 @@ Generated Content Pseudo-elements: ''::before'' and ''::after'' immediately after the originating element's actual content. - 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.
For example, the following rule inserts the string “Note: ” @@ -1206,7 +1219,9 @@ List Markers: the ''::marker'' pseudo-element ISSUE: Interaction of ''::marker'' and ''::first-line'' is currently under discussion in Issue 4506. - 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 +1244,7 @@ Placeholder Input: the ''::placeholder'' pseudo-element 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=].
For example, according to the semantics of [[HTML]] @@ -1266,9 +1282,11 @@ Placeholder Input: the ''::placeholder'' pseudo-element

File Selector Button: the ''::file-selector-button'' pseudo-element

- The ::file-selector-button pseudo-element targets the ''<button>'' - inside an ''<input>'' element with type=file, if the UA - renders such a button. + The ::file-selector-button pseudo-element + targets the ''<button>'' + inside an ''<input>'' element with type=file, + 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. From d0f0f42dae006e9f3cd45b87fc10406d232c7314 Mon Sep 17 00:00:00 2001 From: Tab Atkins-Bittner Date: Fri, 12 Apr 2024 11:55:04 -0700 Subject: [PATCH 2/2] [css-pseudo] Merge definitions into one section, and add example. --- css-pseudo-4/Overview.bs | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index fa9ae9b58d1..f9b1fe5211f 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1140,16 +1140,13 @@ Security and Privacy Considerations the styling of such highlighted segments.

-Tree-Abiding Pseudo-elements

+Tree-Abiding and Part-Like Pseudo-elements Tree-abiding pseudo-elements always fit within the box tree. They inherit any inheritable properties from their originating element; non-inheritable properties take their initial values as usual. [[CSS-CASCADE-4]] -

-Part-Like Pseudo-Elements

- A subset of [=tree-abiding pseudo-elements=], the part-like pseudo-elements, have slightly stronger requirements: @@ -1157,6 +1154,21 @@ Part-Like Pseudo-Elements This enables them to interact with some other platform features as if they were real elements. +
+ 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: + + + <template id=custom-element-template> + <p exportparts="::before : preceding-text"> + You can style my ::before pseudo-element + by using ::part(preceding-text), too! + </template> + +
+ Unless otherwise specified, any CSS property that applies to elements applies to [=part-like pseudo-elements=].