Cloak improvement (#911)

* simplify cloak selector so it's 100% opt-in

* prevent the discovery event from bubbling

* update changelog

* whitespaec

docs/docs/resources/changelog.md

@@ -20,6 +20,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug in `<wa-select>` that caused incorrect spacing of icons
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
 - Improved native radio alignment
+- Improved the `.wa-cloak` utility class so all FOUCE-related solutions are 100% opt-in
 
 ## 3.0.0-alpha.12
 

docs/docs/utilities/fouce.md

@@ -7,6 +7,7 @@ snippet: .wa-cloak
 ---
 
 Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
+
 The FOUCE style utility (which is automatically applied if you use our [style utilities](/docs/utilities/)) automatically takes care of hiding custom elements until **both they and their contents** have been registered, up to a maximum of two seconds.
 
 In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded.

src/styles/utilities/fouce.css

@@ -1,8 +1,6 @@
 /*
  * Utility to minimize FOUCE and show custom elements only after they're registered
  */
-:not(:defined),
-:state(wa-defined):has(:not(:defined)),
 .wa-cloak:has(:not(:defined)) {
   animation: 2s step-end wa-fouce-cloak;
 }

src/utilities/autoloader.ts

@@ -55,7 +55,13 @@ export async function discover(root: Element | ShadowRoot) {
   await new Promise(requestAnimationFrame);
 
   // Dispatch an event when discovery is complete.
-  document.dispatchEvent(new CustomEvent('wa-discovery-complete'));
+  root.dispatchEvent(
+    new CustomEvent('wa-discovery-complete', {
+      bubbles: false,
+      cancelable: false,
+      composed: true,
+    }),
+  );
 }
 
 /**