[css-highlight-api] Use variadic constructor parameter instead of an optional sequence

Closes w3c#4620

Author: frivoal

css-highlight-api-1/Overview.bs

@@ -100,7 +100,7 @@ Introduction</h2>
 			r.setStart(document.body, 0);
 			r.setEnd(document.body, 2);
 
-			CSS.highlights.add(new Highlight("example-highlight", [r]));
+			CSS.highlights.add(new Highlight("example-highlight", r));
 			</script>
 		</xmp>
 
@@ -149,7 +149,7 @@ Creating Custom Highlights</h3>
 	<dfn interface>Highlight</dfn> objects,
 	[=setlike=] objects whose [=set entries=] are {{AbstractRange}} objects.
 	[=Ranges=] can be added to a [=custom highlight=]
-	either by passing a [=sequence=] of them to its constructor,
+	either by passing them to its constructor,
 	or by using the usual API of [=setlike=] objects
 	to manipulate its [=set entries=].
 
@@ -164,7 +164,7 @@ Creating Custom Highlights</h3>
 	<xmp class="idl">
 	[Exposed=Window]
 	interface Highlight {
-		constructor(CSSOMString name, optional sequence<AbstractRange> initialRanges = []);
+		constructor(CSSOMString name, AbstractRange... initialRanges);
 		setlike<AbstractRange>;
 		attribute CSSStyleDeclaration style;
 		attribute double priority;
@@ -176,7 +176,7 @@ Creating Custom Highlights</h3>
 	and [[#style-attr]] for more information on the {{Highlight/style}} attribute.
 
 	<div algorithm="to create a custom highlight">
-		When the <dfn for=Highlight constructor>Highlight(CSSOMString name, optional sequence<AbstractRange> initialRanges = [])</dfn> constructor is invoked,
+		When the <dfn for=Highlight constructor>Highlight(CSSOMString name, AbstractRange... initialRanges)</dfn> constructor is invoked,
 		run the following steps:
 
 		<ol>
@@ -296,7 +296,7 @@ Default Styling of a Custom Highlight</h3>
 				r.setStart(document.body, 0);
 				r.setEnd(document.body, 2);
 
-				let h = new Highlight("inline-highlight", [r]);
+				let h = new Highlight("inline-highlight", r);
 				h.style.backgroundColor = "yellow";
 				h.style.color = "blue";
 
@@ -376,7 +376,7 @@ Painting</h4>
 						r2.setStart(document.body, 3);
 						r2.setEnd(document.body, 7);
 
-						CSS.highlights.add(new Highlight("sample", [r1, r2]));
+						CSS.highlights.add(new Highlight("sample", r1, r2));
 					</script>
 				</xmp>
 
@@ -457,8 +457,8 @@ Priority of Overlapping Highlights</h4>
 				r2.setStart(document.body, 3);
 				r2.setEnd(document.body, 9);
 
-				CSS.highlights.add(new Highlight("foo", [r1]));
-				CSS.highlights.add(new Highlight("bar", [r2]));
+				CSS.highlights.add(new Highlight("foo", r1));
+				CSS.highlights.add(new Highlight("bar", r2));
 			</script>
 		</xmp>