Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-13 22:11:20 -05:00
Code Issues Activity

now possibly obsolete part for issue 9953

Browse source
This commit is contained in:
Martin Trapp 2024-02-10 12:22:45 +01:00
parent 8f37cf72cb
commit 5a8bdeabee
5 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/tidy-buttons-end.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Adds handling of declarative shadow DOMs during view transitions for browsers that support them via `includeShadowRoots`.

7
packages/astro/e2e/fixtures/view-transitions/src/pages/declarative-shadow-dom.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Layout from '../components/Layout.astro';
---
<Layout>
<h2>Shadow DOM</h2>
<p id="light"><template shadowroot="open" shadowrootmode="open">Hey there!</template></p>
</Layout>

1
packages/astro/e2e/fixtures/view-transitions/src/pages/one.astro
View file

@ -12,6 +12,7 @@ import Layout from '../components/Layout.astro';
<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a> <a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a> <a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
<a id="click-404" href="/undefined-page">go to undefined page</a> <a id="click-404" href="/undefined-page">go to undefined page</a>
<a id="click-declarative-shadow-dom" href="/declarative-shadow-dom">page with DSD</a>
<custom-a id="custom-click-two"> <custom-a id="custom-click-two">
<template shadowrootmode="open"> <template shadowrootmode="open">
<a href="/two">go to 2</a> <a href="/two">go to 2</a>

9
packages/astro/e2e/view-transitions.test.js
View file

@ -1351,4 +1351,13 @@ test.describe('View Transitions', () => {
'-\\31 1' '-\\31 1'
); );
}); });
test('automatically handles declarative shadow DOM', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/one'));
await page.click('#click-declarative-shadow-dom');
const h = page.locator('h2');
await expect(h, 'should have content').toHaveText('Shadow DOM');
const elementHandle = await page.$('#light');
const hasShadowRoot = await page.evaluate((el) => !!el.shadowRoot, elementHandle);
expect(hasShadowRoot).toBe(true);
});
}); });

7
packages/astro/src/transitions/router.ts
View file

@ -513,7 +513,12 @@ async function transition(
parser ??= new DOMParser(); parser ??= new DOMParser();
preparationEvent.newDocument = parser.parseFromString(response.html, response.mediaType); // @ts-ignore includeShadowRoots is only supported in Chrome
// @astrojs/lit explicitly requires this because the
// polyfill for handling declarative shadow DOMS excludes browsers with native support
preparationEvent.newDocument = parser.parseFromString(response.html, response.mediaType, {
includeShadowRoots: true,
});
// The next line might look like a hack, // The next line might look like a hack,
// but it is actually necessary as noscript elements // but it is actually necessary as noscript elements
// and their contents are returned as markup by the parser, // and their contents are returned as markup by the parser,