diff --git a/bin/build-reference.py b/bin/build-reference.py index 2a5a29c93..f768f95ac 100644 --- a/bin/build-reference.py +++ b/bin/build-reference.py @@ -16,7 +16,7 @@ from _load_catalog import load_components_rich DOCS = os.path.join(os.path.dirname(os.path.abspath(__file__)), '..', 'docs', 'reference') -ASSET_VERSION = '20260503-script-unescape' +ASSET_VERSION = '20260503-fallback-explicit-hide' PAGE_HEAD = ''' diff --git a/docs/assets/page.js b/docs/assets/page.js index 671003028..ef05e4804 100644 --- a/docs/assets/page.js +++ b/docs/assets/page.js @@ -104,6 +104,15 @@ const code = root.querySelector('pre code'); if (!code) return; + // Shadow DOM has rendered content. Hide the static fallback now — + // not via a CSS `:defined` rule, which fires too early (the moment + // customElements.define() runs, before shadow-DOM render). See + // .snippet-fallback rules in style.css for context. + const fallback = el.querySelector(':scope > .snippet-fallback'); + if (fallback) { + fallback.style.display = 'none'; + } + // HTML emitted by build-reference.py escapes " wrapper as "<\/script" so the // outer tag isn't closed prematurely. The browser preserves that diff --git a/docs/assets/style.css b/docs/assets/style.css index eb429cc66..eb8f81d36 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -483,10 +483,13 @@ p code, li code, td code { php-snippet { display: block; margin: 1rem 0 1.75rem; } -/* Static fallback: shows the snippet code if the cross-origin Playground - custom element fails to register (CSP block, slow network, adblocker, - no-JS reader). Hidden as soon as is defined so the - interactive widget owns the screen when it boots. */ +/* Static fallback: shows the snippet code until the cross-origin Playground + custom element registers AND populates its shadow DOM. page.js hides + this element explicitly once shadow-DOM render is confirmed in + patchSnippet — we do not use a CSS `:defined` rule because that fires + the instant `customElements.define()` runs, before the shadow DOM has + any content. If the cross-origin module never loads (CSP, adblock, + slow network, no-JS), this fallback stays visible. */ .snippet-fallback { margin: 0; padding: 0.9rem; @@ -499,7 +502,6 @@ php-snippet { display: block; margin: 1rem 0 1.75rem; } line-height: 1.55; } .snippet-fallback code { color: inherit; background: none; padding: 0; } -php-snippet:defined .snippet-fallback { display: none; } .code-example { margin: 1rem 0 1.75rem;