[css-animations-2] Define trigger scope (#13241)

* Define trigger-scope

* Flat tree; remove anchor-scope reference

* Apply suggestion from @tabatkins

* light editorial rewrite

Combine some sections and reword a few bits.

---------

Co-authored-by: David Awogbemila <awogbemila@chromium.org>
Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: DavMila

css-animations-2/Overview.bs

@@ -813,7 +813,7 @@ of what can be achieved with the Web Animations API in Javascript,
 allowing simple, common interaction patterns
 to be created and managed purely in CSS.
 
-Currently, two types of <dfn export for=CSS>triggers</dfn> are defined:
+Currently, two types of <dfn export for=CSS lt="trigger">triggers</dfn> are defined:
 
 * [=timeline triggers=], managed by the 'timeline-trigger' properties,
     which allow animations to be triggered by entering or leaving certain timeline ranges.
@@ -826,7 +826,7 @@ Currently, two types of <dfn export for=CSS>triggers</dfn> are defined:
     such as clicking an element or pressing certain keys.
 
 A [=trigger=] is <em>defined</em> on some specific triggering element.
-All triggers have a name,
+All triggers have a <dfn export for=CSS>trigger name</dfn>,
 and the specific type of trigger dictates how and when it's activated.
 A trigger can define multiple "types" of activation.
 (For example, [=timeline triggers=] can do different things on entry and exit.)
@@ -844,30 +844,75 @@ is intentionally somewhat generic,
 intended to support using [=triggers=] for <em>other</em> purposes in the future.
 For now, though, [=triggered animations=] are the only user of this feature.
 
-
-<h3 id="trigger-scope">
-Trigger Scope/Resolution</h3>
-
-All [=triggers=] are document-global by default,
-similar to <l spec="css-anchor-position-1">[=anchor names=]</l>.
-
 If a single element attempts to define multiple [=triggers=] of different types
-with the same name,
-it only exposes one of them,
+with the same [=trigger name=],
+it only exposes one of the [=triggers=],
 with [=event triggers=] winning over [=timeline triggers=].
 
 Note: This order is completely arbitrary
 (based on alphabetic order of the concept name),
 as this is just an error case.
 
-If multiple elements define [=triggers=] with the same name,
+
+<h3 id="trigger-scope">
+Trigger Name Scoping: the 'trigger-scope' property</h3>
+
+[=Trigger names=] are global by default,
+usable by other elements regardless of their position.
+(Though they are [=tree-scoped names=],
+so have interactions with [=shadow roots=]).
+If multiple elements define [=triggers=] with the same [=trigger name=],
 the [=trigger=] defined by the later element in [=tree order=] is used.
 
-Note: This behavior will be improved by a <css>trigger-scope</css> property,
-not yet defined,
-letting you define triggers that are only visible to subtrees
-and references that only search in that subtree
-(just like 'anchor-scope').
+The 'trigger-scope' property can limit the scope of a name
+to a subtree of the document,
+so elements outside won't see the chosen [=trigger name=],
+and elements inside will only see the version of the [=trigger name=]
+defined inside the scope.
+
+<pre class=propdef>
+Name: trigger-scope
+Value: none | all | <<dashed-ident>>#
+Initial: none
+Applies to: all elements
+Inherited: no
+Animation type: not animatable
+Computed value: as specified
+</pre>
+
+This property scopes [=trigger names=] to the subtree of the matching element.
+Its values are:
+
+<dl dfn-for="trigger-scope" dfn-type=value>
+  <dt><dfn>none</dfn>
+  <dd>
+    No changes in [=trigger name=] scope.
+
+  <dt><dfn>all</dfn>
+  <dd>
+    Specifies that all [=trigger names=] defined by this element or its descendants--
+    whose scope is not already limited by a descendant using 'trigger-scope'--
+    to be in scope only for this element's [=flat tree=] descendants;
+    and limits descendants to only match [=trigger names=]
+    to [=triggers=] within this subtree.
+
+    This value only affects [=trigger names=] in the same tree scope,
+    as if it were a [=tree-scoped name/strictly matched=] [=tree-scoped name=].
+    (That is, ''trigger-scope: all'' acts identically
+    to ''trigger-scope: --foo, --bar, ...'',
+    listing all relevant [=trigger names=].)
+
+  <dt><dfn><<dashed-ident>></dfn>
+  <dd>
+    Specifies that a matching [=trigger name=] defined by this element or its descendants--
+    whose scope is not already limited by a descendant using 'trigger-scope'--
+    to be in scope only for this element's [=flat tree=] descendants;
+    and limits descendants to only match these [=trigger names=]
+    to [=triggers=] within this subtree.
+
+    The <<dashed-ident>> represents a [=tree-scoped name/strictly matched=] [=tree-scoped name=],
+    i.e. it can only match against [=trigger names=] in the same shadow tree.[[!CSS-SCOPING-1]]
+</dl>
 
 <!-- Big Text: timeline