Update class:list and astro-hash classes (#4322)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/en/guides/styling.mdx

@@ -41,11 +41,11 @@ This CSS:
 Compiles to this:
 ```astro
 <style>
-  h1:where(.astro-HHNQFKH6) {
+  h1[data-astro-cid-hhnqfkh6] {
      color: red;
   }
 
-  .text:where(.astro-HHNQFKH6) {
+  .text[data-astro-cid-hhnqfkh6] {
     color: blue;
   }
 </style>
@@ -159,7 +159,7 @@ import MyComponent from "../components/MyComponent.astro"
 <MyComponent class="red">This will be red!</MyComponent>
 ```
 
-This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-HHNQFKH6`) through the `class` prop automatically, including the child in its parent’s scope.
+This pattern lets you style child components directly. Astro will pass the parent’s scoped class name (e.g. `astro-hhnqfkh6`) through the `class` prop automatically, including the child in its parent’s scope.
 
 :::note[Scoped classes from parent components]
 Because the `class` prop includes the child in its parent’s scope, it is possible for styles to cascade from parent to child. To avoid this having unintended side effects, ensure you use unique class names in the child component.

src/content/docs/en/reference/directives-reference.mdx

@@ -24,24 +24,21 @@ A template directive is never included directly in the final HTML output of a co
 ## Common Directives
 ### `class:list`
 
-`class:list={...}` takes an array of class values and converts them into a class string. This is inspired by @lukeed's popular [clsx](https://github.com/lukeed/clsx) helper library, but built directly into Astro itself.
+`class:list={...}` takes an array of class values and converts them into a class string. This is powered by @lukeed's popular [clsx](https://github.com/lukeed/clsx) helper library.
 
 `class:list` takes an array of several different possible value kinds:
 - `string`: Added to the element `class`
 - `Object`: All truthy keys are added to the element `class`
 - `Array`: flattened
-- `Set`: flattened
-- `false` or `null`: skipped
+- `false`, `null`, or `undefined`: skipped
 
 ```astro
 <!-- This -->
-<span class:list={[ 'hello goodbye', { hello: true, world: true }, new Set([ 'hello', 'friend' ]) ]} />
+<span class:list={[ 'hello goodbye', { world: true }, [ 'friend' ] ]} />
 <!-- Becomes -->
 <span class="hello goodbye world friend"></span>
 ```
 
-Duplicate values are removed automatically.
-
 ### `set:html`
 
 `set:html={string}` injects an HTML string into an element, similar to setting `el.innerHTML`.