Shadow DOM isolation + JS optimizer opt-out for wp-admin panel - #225
Open
jackgranatowski wants to merge 2 commits into
Open
Shadow DOM isolation + JS optimizer opt-out for wp-admin panel#225jackgranatowski wants to merge 2 commits into
jackgranatowski wants to merge 2 commits into
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe admin app now supports isolated Shadow DOM styling in WordPress, with a light-DOM fallback. WordPress script tags receive optimizer exclusions. The frontend overlay blocks pointer events before mounting. Semantic color overrides can display explanatory notes. ChangesAdmin app integration
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Slashed_Token_Page
participant slashedApp
participant admin_app_main
participant ShadowRoot
participant App
Slashed_Token_Page->>slashedApp: Provide app.css URL
admin_app_main->>slashedApp: Read and validate cssUrl
admin_app_main->>ShadowRoot: Attach shadow root and load stylesheet
ShadowRoot-->>admin_app_main: Load, error, or five-second timeout
admin_app_main->>App: Apply theme and mount
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@SLASHED-for-WP/admin-app/src/main.ts`:
- Around line 77-102: Update the shadow-style loading flow around `go`,
`settle`, and `attachShadow` so Shadow DOM is created and mounted only after the
stylesheet loads successfully. On stylesheet error, clear the fallback timer and
mount via the existing light-DOM path using `wpHost`, preserving the light-DOM
stylesheet; retain the timeout fallback behavior without attaching Shadow DOM
prematurely.
- Around line 27-107: Move the Shadow DOM changes from
SLASHED-for-WP/admin-app/src/main.ts (lines 27-107) and the semantic-note
changes from SLASHED-for-WP/admin-app/src/components/panels/ColorsPanel.svelte
(lines 156-161 and 1106-1108) into their framework/configurator source so npm
run sync regenerates them correctly; alternatively, add explicit .syncignore
entries for all affected files.
In `@SLASHED-for-WP/includes/class-frontend-configurator.php`:
- Line 35: Add data-nowprocket="1" to both module attribute constants and both
inline attribute filters. Update
SLASHED-for-WP/includes/class-frontend-configurator.php at lines 35 and 55-56,
and SLASHED-for-WP/includes/class-token-page.php at lines 437 and 451-452,
preserving the existing exclusion attributes.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1e771dad-8b71-40ac-91cb-ba6c2a8c1627
📒 Files selected for processing (6)
SLASHED-for-WP/admin-app/.vendored-manifest.jsonSLASHED-for-WP/admin-app/src/components/panels/ColorsPanel.svelteSLASHED-for-WP/admin-app/src/main.tsSLASHED-for-WP/assets/admin-app/app.jsSLASHED-for-WP/includes/class-frontend-configurator.phpSLASHED-for-WP/includes/class-token-page.php
…timizers
The admin token editor (admin.php?page=slashed-tokens) mounted into the
shared wp-admin document, so another admin plugin's CSS/JS could leave the
panel rendered but completely unresponsive — confirmed on a real site where
window.wp.svgPainter was clobbered and svg-painter.js threw during init.
The frontend "/ Design" overlay kept working there precisely because it
mounts in an isolated Shadow DOM.
Give the admin panel the same encapsulation:
- Localize a same-origin cssUrl so the vendored main.ts mounts the panel
inside a Shadow DOM and links the panel stylesheet inside it. app.css
stays enqueued in <head> so the light-DOM fallback (no Shadow DOM /
cross-origin URL / stylesheet load failure) is still styled.
- Opt the SPA scripts out of JS optimizers that break ES modules (LiteSpeed,
SG Optimizer, WP Rocket incl. Delay-JS via data-nowprocket, Perfmatters,
Cloudflare Rocket Loader), on both the module tag and the inline hydration
scripts, for the admin panel and the frontend overlay.
- Fix a real click-trap: the empty #slashed-frontend-overlay fixed layer
swallowed clicks before mount; start it at pointer-events:none.
- Re-vendor + rebuild the admin bundle so the shipped app.js carries the
isolated-mount logic.
Shadow DOM here is CSS/DOM encapsulation, not a JS sandbox, but it is what
the failure needs: host styles no longer reach the panel and Svelte's
delegated listeners bind to the shadow-internal root. Verified headlessly:
under a hostile `* { pointer-events: none !important }` rule plus a clobbered
window.wp the panel renders fully and responds to clicks; a 404 stylesheet
falls back to a styled light-DOM mount.
Note: src/main.ts and ColorsPanel.svelte are vendored from
codeslash-dev/slashed; the matching framework change ships the same edits
upstream, so the next release sync stays clean.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PtvNAKsrEE1mynifQbjSun
jackgranatowski
force-pushed
the
claude/konfigurator-opcje-tokeny-rmorrr
branch
from
August 8, 2026 22:49
a898bab to
93a1e17
Compare
Contributor
Author
CI status — two remaining red checks are expected, not regressionsFixed in
The two checks still red are not caused by this diff:
The functional change (admin panel mounts in a Shadow DOM; light-DOM fallback; optimizer opt-outs; overlay click-trap fix) is verified headlessly — under a hostile Generated by Claude Code |
npm audit flagged high-severity advisories in transitive dev/build dependencies (fast-uri, js-yaml, nanoid, postcss, and related) across the root toolchain and both bundled Svelte apps (admin-app, editor-app). All are fixable without breaking changes, so `npm audit fix` bumps them to patched versions in each lockfile. Only the three package-lock.json files change; the committed admin-app/editor-app bundles rebuild identically, and both builds still succeed. `npm audit --audit-level=high` now reports 0 vulnerabilities in all three trees, clearing that portion of the Dependency vulnerability audit gate (the drift gate remains until the framework change is released and this plugin re-pins). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PtvNAKsrEE1mynifQbjSun
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Hardens the wp-admin configurator panel against interference from other WordPress admin plugins' CSS and JavaScript by mounting it inside a Shadow DOM (when available), and adds opt-out attributes to prevent third-party JS optimizers (LiteSpeed Cache, SG Optimizer, WP Rocket, Perfmatters, Cloudflare Rocket Loader) from breaking the native ES module by combining or deferring it.
The panel now:
app.cssin<head>) if Shadow DOM is unavailable or the stylesheet URL is cross-origindata-no-optimize,data-no-defer,data-no-delay,data-no-minify, anddata-cfasyncattributes on both the module script and its inline hydration scripts to prevent optimizer plugins from breaking the module scope (which would leave the panel rendered but unresponsive)Also adds a note to the "Link visited" color override in ColorsPanel explaining that browsers restrict
:visitedstyling for privacy, so the preview can't show live changes (though the override still applies on real visited links on the published site).Type
Checklist
feat:,fix:,docs:, …)npm testpassesnpm run lintpasses (stylelint +php -l)npm run verifypasses (version metadata in sync)dist/,data/inventory.json,data/classes-hints.jsoncome fromupdate-framework/build:data)CHANGELOG.mdupdated under## [Unreleased](for user-facing changes)editor-app/admin-appsource changedNotes
The vendored manifest was updated to reflect a local sync (the
sourcefield changed fromgithub:codeslash-dev/slashed@v0.7.30tolocal:SLASHED_CONFIGURATOR_SRC), which is expected when syncing from a local framework checkout. The actual source code changes are inplugin-main.ts(Shadow DOM mount logic),class-token-page.phpandclass-frontend-configurator.php(optimizer opt-out attributes), andColorsPanel.svelte(UX note for the visited link color).https://claude.ai/code/session_01PtvNAKsrEE1mynifQbjSun
Summary by CodeRabbit