From 3508bf6339539f8089bbdafe95897394f80de87b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 7 May 2025 14:17:26 -0400 Subject: [PATCH] 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 | 1 + docs/docs/utilities/fouce.md | 1 + src/styles/utilities/fouce.css | 2 -- src/utilities/autoloader.ts | 8 +++++++- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 8ace09e29..d4eac447f 100644 --- a/docs/docs/resources/changelog.md +++ b/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 `` 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 diff --git a/docs/docs/utilities/fouce.md b/docs/docs/utilities/fouce.md index f525f594f..dd55da0f9 100644 --- a/docs/docs/utilities/fouce.md +++ b/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. diff --git a/src/styles/utilities/fouce.css b/src/styles/utilities/fouce.css index 84ab08e48..c73fcbbf7 100644 --- a/src/styles/utilities/fouce.css +++ b/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; } diff --git a/src/utilities/autoloader.ts b/src/utilities/autoloader.ts index c40127ce5..8870e4fdb 100644 --- a/src/utilities/autoloader.ts +++ b/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, + }), + ); } /**