xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix issue #933 (#942)

Browse Source 
* fix: style not applied to polyfillled shadow dom

* test: add integration test for shadydom and @lwc/synthetic-shadow

* improve the implementation of function isNativeShadowDom

* apply lele0108's review suggestion
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 5c1c104073
commit b60ad44a19
8 changed files with 658 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/rrweb/test/integration.test.ts
View File

@@ -589,6 +589,78 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots);
});
// https://github.com/webcomponents/polyfills/tree/master/packages/shadydom
it('should record shadow doms polyfilled by shadydom', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
// insert shadydom script
replaceLast(
getHtml.call(this, 'polyfilled-shadowdom-mutation.html'),
'<head>',
`
<head>
<script>
// To force ShadyDOM to be used even when native ShadowDOM is available, set the ShadyDOM = {force: true} in a script prior to loading the polyfill.
window.ShadyDOM = { force: true };
</script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/shadydom@1.9.0/shadydom.min.js"></script>
`,
),
);
await page.evaluate(() => {
const target3 = document.querySelector('#target3');
target3?.attachShadow({
mode: 'open',
});
target3?.shadowRoot?.appendChild(document.createElement('span'));
});
await waitForRAF(page); // wait till browser sent snapshots
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
});
// https://github.com/salesforce/lwc/tree/master/packages/%40lwc/synthetic-shadow
it('should record shadow doms polyfilled by synthetic-shadow', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
// insert lwc's synthetic-shadow script
replaceLast(
getHtml.call(this, 'polyfilled-shadowdom-mutation.html'),
'<head>',
`
<head>
<script>var process = {env: {NODE_ENV: "production"}};</script>
<script src="https://cdn.jsdelivr.net/npm/@lwc/synthetic-shadow@2.20.3/dist/synthetic-shadow.js"></script>
`,
),
);
await page.evaluate(() => {
const target3 = document.querySelector('#target3');
// create a shadow dom with synthetic shadow
// https://github.com/salesforce/lwc/blob/v2.20.3/packages/@lwc/synthetic-shadow/src/faux-shadow/element.ts#L81-L87
target3?.attachShadow({
mode: 'open',
'$$lwc-synthetic-mode': true,
} as ShadowRootInit);
target3?.shadowRoot?.appendChild(document.createElement('span'));
const target4 = document.createElement('div');
target4.id = 'target4';
// create a native shadow dom
document.body.appendChild(target4);
target4.attachShadow({
mode: 'open',
});
target4.shadowRoot?.appendChild(document.createElement('ul'));
});
await waitForRAF(page); // wait till browser sent snapshots
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
});
it('should mask texts', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');