fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

fix(masking): Propagate masking and blocking from a shadow host into its shadow root - #319

Draft
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking
Draft

fix(masking): Propagate masking and blocking from a shadow host into its shadow root#319
logaretm wants to merge 2 commits into
sentry-v2from
awad/shadow-host-masking

Conversation

@logaretm

@logaretmlogaretm commented Aug 31, 2026

Copy link
Copy Markdown
Member

Makes data-sentry-mask / data-sentry-block on an open shadow host actually apply to the nodes inside that host's shadow root.

distanceToMatch walked up via parentNode and bailed on the first non-element. A ShadowRoot is a DOCUMENT_FRAGMENT_NODE, so the walk died at the shadow boundary and never reached shadowRoot.host.

The upstream rrweb has the same bug via el.closest(), which doesn't cross shadow boundaries either, and there's no upstream issue or fix for it 🤔

The downside for this is I see the performance exploding for apps that make heavy use of web components, especially ones that don't mask anything in there.

Also this introduces a large behavior change, and maybe two trade offs:

A: mask and unmask both cross into the shadow root. Consistent, but it can silently un-mask content that's masked today. Technically we fixed a bug tho.

B: only mask and block cross. Unmask stays outside. Changes nothing for the default config, and fixes the original report. The cost is that data-sentry-unmask on a host silently does nothing, so you can't unmask a third-party component from outside it.

The PR currently implements A which I think while more aggressive, is the more consistent and has less "but"s.

logaretmand others added 2 commits August 31, 2026 16:37
…its shadow root
`distanceToMatch` stopped its ancestor walk at the shadow boundary, since a
ShadowRoot is a DOCUMENT_FRAGMENT_NODE and got caught by the non-element check.
A mask or block match on an open shadow host was therefore invisible to every
node inside that host's shadow tree.
Step from a shadow root onto its host instead. `needMaskingText` and `isBlocked`
share this walker, so one change covers both. The hop increments the distance,
which also makes unmask and unblock selectors inside a shadow root resolve
against a matched host, something that previously could not happen at all.
@logaretm

Copy link
Copy Markdown
MemberAuthor

Keeping this in draft, I wanted to ask for initial vibe review or any opposition to this.

@billyvg

Copy link
Copy Markdown
Member

This change seems reasonable, though the perf explosion would give me pause. [do we add yet another option?]

@mydea

mydea commented Sep 1, 2026

Copy link
Copy Markdown
Member

Do we know the perf explosion is bad/impactful? Realistically this should only impact apps using web components, so not sure if an option makes sense here? Maybe an opt-out option if this really becomes a problem, but I think I'd tend to ship it as-is and add an option if necessary later. Or, we add an option to rrweb but do not expose/use it in replay yet, which would make it easier to adjust this in a follow up if needed?

@logaretm

Copy link
Copy Markdown
MemberAuthor

I think it is a bit unknown as it would cause the walker to go through nodes that it didn't go through before.

We could always ship and see if people come in with their use case if affected.

@Lms24Lms24 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could always ship and see if people come in with their use case if affected

Agreed! We can add an opt-in/-out option based on feedback. v11 seems like a good opportunity to ship the behaviour change (option A)

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@logaretm@billyvg@mydea@Lms24