[css-pseudo-4] Define the behavior when custom properties must be taken from the root

css-pseudo-4/Overview.bs

@@ -696,6 +696,8 @@ Styling Highlights</h3>
     <wpt>
     css/css-pseudo/textpath-selection-011.html
     </wpt>
+
+    <li>A [=custom property=] may be defined and/or used inside a highlight pseudo-element.
   </ul>
 
   The 'forced-color-adjust' property cannot be set on [=highlight pseudo-elements=];
@@ -868,11 +870,12 @@ Cascading and Per-Element Highlight Styles</h3>
   This occurs regardless of whether that property is an <a>inherited property</a>
   (and regardless of whether that property is a [=custom property=]
   that is registered to [=CSS/inherit=] or not).
-  Additionally,
-  for [=highlight pseudo-elements=] originating from the root element,
-  the [=inherited value=] of 'color'
-  is ''currentColor'',
-  not the [=initial value=].
+
+  Additionally, for [=highlight pseudo-elements=] originating from the [=root element=]:
+  <ul>
+   <li> the inherited value of 'color' is ''currentColor'', not the [=initial value=].
+   <li> [=custom properties=] inherit from the [=root element=].
+  </ul>
 
   <wpt>
   css/css-pseudo/active-selection-051.html
@@ -936,6 +939,42 @@ Cascading and Per-Element Highlight Styles</h3>
   css/css-pseudo/cascade-highlight-002.html
   </wpt>
 
+  The following examples demonstrates the inheritaqnce of [=custom properties=].
+
+  <div class="example">
+    For example, if an author specified
+    <pre class="lang-css">
+     :root {
+        --background-color: green;
+        --decoration-thickness: 10px;
+        --decoration-color: purple;
+      }
+      ::selection {
+        --decoration-thickness: 1px;
+        --decoration-color: green;
+      }
+      div::selection {
+        --decoration-color: blue;
+        background-color: var(--background-color, red);
+        text-decoration-line: underline;
+        text-decoration-style: line;
+        text-decoration-thickness: var(--decoration-thickness, 5px);
+        text-decoration-color: var(--decoration-color, red);
+      }
+    </pre>
+    A div's selection highlight would be a green background to the
+    selected content, with a 1px thick blue underline. The
+    ''--background-color'' custom property is not found on the
+    ''div::selection'' nor ''::selection'' so it is taken from the
+    ''::root'' custom property match. The ''--decoration-thickness''
+    property is inherited from ''::selection'' via the highlight
+    cascade and ''--decoration-color'' is found in
+    ''div::selection'' itself.
+  </div>
+
+  Note: This behavior is intended to accomodate the standard practice of
+  defining document-wide custom properties on '':root''.
+
 <h3 id="highlight-painting">
 Painting the Highlight</h3>
 
@@ -1468,6 +1507,9 @@ Changes</h2>
       and {{CSSPseudoElement/pseudo()}} method
       to address [=sub-pseudo-elements=].
       (<a href="https://github.com/w3c/csswg-drafts/issues/3836">Issue 3836</a>)
+    <li>Defined the behavior when custom property values are not found in the
+      highlight cascade; they are taken from the root.
+      (<a href="https://github.com/w3c/csswg-drafts/issues/6641">Issue 6641</a>)
   </ul>
 
   Significant changes since the <a href="https://www.w3.org/TR/2019/WD-css-pseudo-4-20190225/">25 February 2019 Working Draft</a> include: