::details-content and ::part() are element-backed

Before this commit, ::details-content was not defined as element-backed, and all
pseudos could be compounded to ::part(). Both are now defined as element-backed
and can be compounded with pseudos that do not expose structural informations.

w3c/csswg-drafts#10786 resolved on making these pseudos invalid at parse time
but this is still unspecified.

Author: cdoublev

__tests__/value.js

@@ -4389,6 +4389,17 @@ describe('<selector-list>', () => {
             '::before:not(:not(:only-child))',
             '::before:not(type)',
             '::before:not(:hover > type)',
+            '::part(name):only-child',
+            '::part(name):empty',
+            '::part(name):nth-child(1)',
+            '::part(name):host',
+            '::part(name):host(:hover)',
+            '::part(name):host-context(:hover)',
+            '::part(name):scope',
+            '::part(name):not(:only-child)',
+            '::part(name):not(type)',
+            '::part(name):has(:hover)',
+            '::part(name):not(:has(:hover))',
             // Invalid functional pseudo argument
             ':has(:not(:has(type)))',
             ':current(:not(type > type))',
@@ -4402,6 +4413,7 @@ describe('<selector-list>', () => {
             // Invalid sub-pseudo-element
             '::marker::before',
             '::marker::highlight(name)',
+            '::part(name)::part(name)',
             // Invalid pseudo-element combination (no internal structure)
             '::before span',
             '::before + span',
@@ -4451,20 +4463,17 @@ describe('<selector-list>', () => {
             ['::marker:only-child'],
             ['::marker:nth-child(1 of :hover)'],
             ['::marker:not(:only-child, :not(:nth-child(1 of :hover)))'],
-            ['::part(name):empty'],
-            ['::part(name):only-child'],
-            ['::part(name):nth-child(1)'],
-            ['::part(name):has(type)'],
-            ['::part(name):is(type)'],
-            ['::part(name):not(type)'],
+            ['::part(name):current'],
+            ['::part(name):active-view-transition-type(name)'],
+            ['::part(name):not(:current)'],
             // Sub-pseudo-element
             ['::after::marker'],
             ['::before::marker'],
             ['::first-letter::prefix'],
             ['::first-letter::suffix'],
             ['::before:hover::marker:focus', '::before:hover::marker:focus'],
             ['::part(name)::marker'],
-            ['::part(name)::part(name)'],
+            ['::part(name)::slotted(type)'],
             ['::slotted(type)::marker'],
             ['::slotted(type)::part(name)'],
             // Nesting selector

lib/parse/preprocess.js

@@ -200,10 +200,7 @@ function preParseCompoundSelector(node) {
             pseudos.logical[node.definition.name]
             && findParent(
                 node,
-                node =>
-                    node.parent?.definition.name === '<pseudo-compound-selector>'
-                    // ::part(name):not(type) must be valid (but match nothing)
-                    && node.children[0].value[1][1].name !== 'part',
+                node => node.parent?.definition.name === '<pseudo-compound-selector>',
                 node => node.definition.name === '<subclass-selector>'))
     ) {
         return error(node)

lib/values/pseudos.js

@@ -207,6 +207,25 @@ const viewTransitions = {
     },
 }
 
+/**
+ * @see {@link https://drafts.csswg.org/css-pseudo-4/#element-backed}
+ */
+const elemental = {
+    functions: {
+        'part': {
+            classes: [/* filled at the bottom of the file */],
+            elements: [/* filled at the bottom of the file */],
+            value: '<ident>+',
+        },
+    },
+    identifiers: {
+        'details-content': {
+            classes: [/* filled at the bottom of the file */],
+            elements: [/* filled at the bottom of the file */],
+        },
+    },
+}
+
 /**
  * @see {@link https://drafts.csswg.org/css-pseudo-4/#highlight-selectors}
  */
@@ -245,21 +264,17 @@ const highlight = {
 const treeAbiding = {
     functions: {
         ...viewTransitions.elements.functions,
-        'part': {
-            classes: [/* filled at the bottom of the file */],
-            elements: [/* filled at the bottom of the file */],
-            value: '<ident>+',
-        },
+        ...elemental.functions,
         'picker': { value: '<form-control-identifier>+' },
         'scroll-button': { classes: ['disabled'], value: "'*' | <scroll-button-direction>" },
     },
     identifiers: {
+        ...elemental.identifiers,
         ...viewTransitions.elements.identifiers,
         'after': { classes: ['empty'], elements: ['marker'] },
         'backdrop': {},
         'before': { classes: ['empty'], elements: ['marker'] },
         'checkmark': {},
-        'details-content': {},
         'file-selector-button': {},
         'marker': { classes: indexedNames },
         'picker-icon': {},
@@ -374,12 +389,29 @@ const elements = {
     },
 }
 
-treeAbiding.functions.part.classes.push(
-    ...classes.identifiers,
-    ...Object.keys(classes.functions))
-treeAbiding.functions.part.elements.push(
-    ...Object.keys(elements.functions),
-    ...Object.keys(elements.identifiers))
+const pseudoClassNames = [
+    ...classes.identifiers.filter(name =>
+        !structural.identifiers.includes(name)
+        && name !== 'host'
+        && name !== 'scope'
+    ),
+    ...Object.keys(classes.functions).filter(name =>
+        !structural.functions[name]
+        && !name.startsWith('host')),
+]
+const pseudoElementNames = [
+    ...Object.keys(elements.functions).filter(name => name !== 'part'),
+    ...Object.keys(elements.identifiers),
+]
+
+Object.values(elemental.functions).forEach(({ classes, elements }) => {
+    classes.push(...pseudoClassNames)
+    elements.push(...pseudoElementNames)
+})
+Object.values(elemental.identifiers).forEach(({ classes, elements }) => {
+    classes.push(...pseudoClassNames)
+    elements.push(...pseudoElementNames)
+})
 
 export {
     classes,