Use Shadow DOM as default mount mode#74
Merged
Merged
Conversation
…leak Catches the bug class where a downstream bundler re-emits the `__TPL_INLINE_EDITOR_CSS__` placeholder string in a quote form the plugin's variant matcher misses, leaving the literal token in the chunk and breaking shadow-DOM styling for every consumer. Independent of the plugin's own internal `this.error?.()` self-check so the regression surfaces even if someone disables that. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Behavioral specs are dual-mode and cover the interactive surface that matters for shadow correctness. Pixel-level baselines for shadow mode would have low marginal value and high maintenance cost. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
In shadow mode, listeners attached at `document` level receive events with `event.target` retargeted to the shadow host element — the actual innermost target inside the shadow tree is only accessible via `event.composedPath()`. Two production sites broke without this: - `isEditingText()` decided "not editing" because the retargeted host isn't contentEditable, so Backspace mid-typing deleted the whole block instead of a character. - `handleClickOutside()` decided every click was outside the editor wrapper (host element isn't inside `.tpl-text-editor-wrapper`), so every mousedown inside the shadow tree exited edit mode — including double-click word-select. Both sites now walk composedPath. Light-DOM behavior is unchanged (composedPath returns the same chain as target's ancestors when there's no shadow root in the path). Regression tests added: - Unit: 3 new isEditingText cases mocking composedPath (shadow target, shadow INPUT, no editing surface). - E2E: shadow-event-retargeting.spec.ts dispatches synthetic Backspace and mousedown events from inside the shadow-mounted contenteditable and asserts block count unchanged + text toolbar still visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`isNodeSelected()` (used by MergeTagNode and LogicMergeTagNode keyboard shortcuts) returned `true` whenever `nodesBetween($from, $to)` found a merge tag anywhere in the selection range, which caused the TipTap keymap to suppress Backspace/Delete entirely. Effect: any range selection spanning a merge tag (Cmd+A, drag-select, double-click word) silently no-op'd when the user pressed Backspace. Cursor-adjacent atom protection (the "first press selects, second deletes" UX) is the only piece that should suppress default behavior. Range selections fall through to ProseMirror's replaceSelection which handles atomic deletion correctly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Manual testing in Chromium (2026-05-12) confirmed typing into a shadow-mounted TipTap contenteditable works correctly for real users: ProseMirror auto-detects the shadow root via `view.root` and uses Chromium's native `ShadowRoot.getSelection()`. The original "TipTap selection API doesn't pierce shadow boundary" diagnosis was wrong. Real cause: Playwright's `page.keyboard.type()` / `pressSequentially()` / `keyboard.press()` don't reliably deliver synthetic keystrokes to contenteditables inside a shadow root — keys land on the shadow host instead. Specs that rely on those helpers are skipped in the shadow project; behavior is verified manually. No code or behavior change. Updates 4 spec files' skip messages so future readers understand the gap is Playwright-specific, not a shadow-DOM bug. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying templatical-playground with
|
| Latest commit: |
1e120d6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://13aea596.templatical-playground.pages.dev |
| Branch Preview URL: | https://use-shadow-dom.templatical-playground.pages.dev |
orkhanahmadov
changed the title
Deploying templatical-docs with
|
| Latest commit: |
1e120d6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://050ee4ed.templatical-docs.pages.dev |
| Branch Preview URL: | https://use-shadow-dom.templatical-docs.pages.dev |
Deploying templatical-cloud-site with
|
| Latest commit: |
1e120d6
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://9c8cf3eb.templatical-cloud-site.pages.dev |
| Branch Preview URL: | https://use-shadow-dom.templatical-cloud-site.pages.dev |
# Conflicts: # .github/workflows/ci.yml
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
1 participant
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.
Mount the editor inside a Shadow DOM by default, closing #70. Host page stylesheets can no longer cascade into editor elements (
<p>,<h1>,<a>, form controls, etc.) via tag selectors.Opt out with
shadowDom: false— supported.Behavior changes consumers may notice
document.querySelector("#editor .tpl-…")no longer reaches editor internals. Pierce viacontainer.shadowRoot.querySelector(...)or opt out.--tpl-user-*CSS variables on the container (or any ancestor) inherit across the shadow boundary and win over defaults. The existing theme config option still takes precedence.adoptedStyleSheets). Chrome / Edge 80+ unchanged.shadowDom: falsekeeps the broader floor.