Conversation
…hadow roots Replace the Element.prototype.attachShadow monkey-patch with a MutationObserver approach. The patch was broken for two reasons: 1. PyScript attaches the shadow root to an anonymous <div> inside .py-editor-input, not on .py-editor-input itself, so the class check on `this` never matched. 2. PyScript core.js also patches attachShadow via queueMicrotask, running after our synchronous script and overwriting our patch. The observer watches document.body for .py-editor-input nodes being inserted (PyScript builds the full tree off-DOM, calls attachShadow, then appends), finds the shadow host child div, and adopts the shared CSSStyleSheet into its already-attached shadow root. Also fix token class names in buildCSS(): CodeMirror 6 uses tok-* class names from @lezer/highlight classHighlighter, not the legacy cm-* names from CodeMirror 5. Also fix the SVG run button icon in dark mode: override PyScript's hardcoded fill="#464646" on the path element with fill:currentColor so the icon inherits the button's themed color variable.
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
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
Element.prototype.attachShadowmonkey-patch with aMutationObserverthat watches for.py-editor-inputnodes being inserted into the DOM and adopts the sharedCSSStyleSheetinto the shadow root that PyScript has already attached by that point.buildCSS(): CodeMirror 6 emitstok-*class names via@lezer/highlight'sclassHighlighter, not the legacycm-*names from CodeMirror 5.fill="#464646"withfill: currentColor.Root causes
The monkey-patch approach had two independent failure modes:
Wrong element: PyScript attaches the shadow root to an anonymous
<div>inside.py-editor-input, not on.py-editor-inputitself. The class check onthis(the element callingattachShadow) never matched because that element has no classes.Patch overwritten: PyScript's
core.jsalso patchesElement.prototype.attachShadowviaqueueMicrotask, which runs after our synchronous script and silently replaces our patch with its own.Fix
PyScript builds the full editor tree off-DOM, calls
attachShadowon the inner div, then appends the whole tree to the page. By the time theMutationObserverfires on the inserted.py-editor-box,host.shadowRootalready exists and can be adopted into immediately -- no race condition.