Remove 'scroll-container-name', identifying the scrollSource via 'element(#id)' instead

Author: theres-waldo

Overview.bs

@@ -327,29 +327,6 @@ element.
 </div>
 </div>
 
-## The 'scroll-container-name' property ## {#scroll-container-name}
-
-<pre class='propdef'>
-Name: scroll-container-name
-Value: [ none | <<custom-ident>> ]
-Initial: none
-Applies to: [=scroll containers=]
-Inherited: none
-Animatable: no
-Percentages: N/A
-Media: interactive
-Computed value: As specified
-Canonical order: per grammar
-</pre>
-
-The 'scroll-container-name' property defines a custom identifier for a [=scroll container=],
-which allows the scroll container to be referred to by the 'animation-trigger' property
-(and possibly other properties in the future).
-
-Each 'scroll-container-name' value in a document should be unique; if multiple scroll 
-containers in a document have the same 'scroll-container-name', references to that name
-resolve to an unspecified one of them.
-
 ## The 'animation-trigger' property ## {#animation-trigger}
 
 <pre class='propdef'>
@@ -367,7 +344,7 @@ Canonical order: per grammar
 
 <dfn>&lt;single-animation-trigger></dfn> = auto | <<scroll-trigger>>
 
-<dfn>&lt;scroll-trigger></dfn> = scroll(<<custom-ident>>, <<scroll-direction>> [, <<scroll-offset>> [, <<scroll-offset>>]])
+<dfn>&lt;scroll-trigger></dfn> = scroll(element(<<id-selector>>), <<scroll-direction>> [, <<scroll-offset>> [, <<scroll-offset>>]])
 
 <dfn>&lt;scroll-direction></dfn> = auto | horizontal | vertical
 
@@ -387,8 +364,8 @@ following effects:
 :   <<scroll-trigger>>
 ::  The animation's [[web-animations#timeline|timeline]] has a {{ScrollTrigger}}.
 
-    The trigger's {{ScrollTrigger/scrollSource}} is the [=scroll container=] whose 
-    'scroll-container-name' matches the provided <<custom-ident>>.
+    The trigger's {{ScrollTrigger/scrollSource}} is the [=scroll container=] identified
+    by the <<id-selector>>.
 
     The trigger's {{ScrollTrigger/orientation}} is determined by the provided
     <<scroll-direction>>.
@@ -463,16 +440,14 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
         transform: rotate(1turn);
       }
     }
-    html {
-      scroll-container-name: root;
-    }
     #spinner {
       animation-name: spin;
       animation-duration: 300ms;
       animation-fill-mode: both;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
-      animation-trigger: scroll(root, vertical, 500px, 1000px);
+      /* Assume the HTML element has id 'root' */
+      animation-trigger: scroll(element(#root), vertical, 500px, 1000px);
     }
   </pre>
 </div>
@@ -488,10 +463,8 @@ Issue: Do we need 'animation-trigger' at all, or is ''@trigger'' sufficient?
         transform: rotate(1turn);
       }
     }
-    html {
-      scroll-container-name: root;
-    }
-    @trigger scroll(root, vertical, 500px, 1000px) {
+    /* Assume the HTML element has id 'root' */
+    @trigger scroll(element(#root), vertical, 500px, 1000px) {
       #spinner {
         animation-name: spin;
         animation-duration: 300ms;
@@ -724,9 +697,6 @@ following effects:
         width: 100vw;
       }
     }
-    html {
-      scroll-container-name: root;
-    }
     #progress {
       position: fixed;
       top: 0;
@@ -736,7 +706,8 @@ following effects:
       animation-name: progress;
       animation-duration: 1s;
       animation-timing-function: linear;
-      animation-trigger: scroll(root, vertical);
+      /* Assume the HTML element has id 'root' */
+      animation-trigger: scroll(element(#root), vertical);
       animation-timeline: scroll();
     }
   </pre>
@@ -753,17 +724,15 @@ following effects:
         width: 100vw;
       }
     }
-    html {
-      scroll-container-name: root;
-    }
     #progress {
       position: fixed;
       top: 0;
       width: 0;
       height: 2px;
       background-color: red;
     }
-    @trigger scroll(root, vertical) {
+    /* Assume the HTML element has id 'root' */
+    @trigger scroll(element(#root), vertical) {
       #progress {
         animation-name: progress;
         animation-duration: 1s;