Skip to content

Commit

Permalink
[SSR] Add shadowrootmode forwards compat (#3599)
Browse files Browse the repository at this point in the history
  • Loading branch information
@e111077
e111077 committed Jan 23, 2023
1 parent 0b35d83 commit ca74ff6
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 26 deletions.
5 changes: 5 additions & 0 deletions .changeset/quick-apricots-lick.md
View file
@@ -0,0 +1,5 @@
---
'@lit-labs/ssr': minor
---

Forwards compatibility for Declarative Shadow DOM's shadowrootmode rename
22 changes: 11 additions & 11 deletions packages/labs/eleventy-plugin-lit/src/test/eleventy-plugin-test.ts
View file
Expand Up @@ -225,7 +225,7 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading</h1>
<p><my-element><template shadowroot="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element></p>
<p><my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element></p>
`)
);
});
Expand Down Expand Up @@ -261,7 +261,7 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading</h1>
<my-element><template shadowroot="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element>
<my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element>
`)
);
});
Expand Down Expand Up @@ -289,7 +289,7 @@ modes.forEach((mode) => {
<html>
<body>
<h1>Heading</h1>
<my-element><template shadowroot="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element>
<my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element>
</body>
</html>
`)
Expand Down Expand Up @@ -344,11 +344,11 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading 1</h1>
<my-container><template shadowroot="open"><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
<my-content><template shadowroot="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-content>
<my-container><template shadowroot="open" shadowrootmode="open"><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
<my-content><template shadowroot="open" shadowrootmode="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-content>
</my-container>
<h1>Heading 2</h1>
<p><my-container><template shadowroot="open"><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template></my-container></p>
<p><my-container><template shadowroot="open" shadowrootmode="open"><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template></my-container></p>
`)
);
});
Expand Down Expand Up @@ -424,7 +424,7 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading</h1>
<p><my-element><template shadowroot="open"><!--lit-part QMmCfL7Whws=-->INITIAL<!--/lit-part--></template></my-element></p>
<p><my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part QMmCfL7Whws=-->INITIAL<!--/lit-part--></template></my-element></p>
`)
);
});
Expand All @@ -451,7 +451,7 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading</h1>
<p><my-element><template shadowroot="open"><!--lit-part JDaFfBEPiAs=-->UPDATED<!--/lit-part--></template></my-element></p>
<p><my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part JDaFfBEPiAs=-->UPDATED<!--/lit-part--></template></my-element></p>
`)
);
});
Expand Down Expand Up @@ -510,8 +510,8 @@ modes.forEach((mode) => {
await rig.read('_site/index.html'),
normalize(`
<h1>Heading</h1>
<my-element-1><template shadowroot="open"><!--lit-part wBkDjDE4LIw=--><b>shadow content 1</b><!--/lit-part--></template></my-element-1>
<my-element-2><template shadowroot="open"><!--lit-part gxUDjDE4LIw=--><b>shadow content 2</b><!--/lit-part--></template></my-element-2>
<my-element-1><template shadowroot="open" shadowrootmode="open"><!--lit-part wBkDjDE4LIw=--><b>shadow content 1</b><!--/lit-part--></template></my-element-1>
<my-element-2><template shadowroot="open" shadowrootmode="open"><!--lit-part gxUDjDE4LIw=--><b>shadow content 2</b><!--/lit-part--></template></my-element-2>
`)
);
});
Expand All @@ -531,7 +531,7 @@ modes.forEach((mode) => {
await rig.read(`_site/page${i}/index.html`),
normalize(`
<h1>Page ${i}</h1>
<p><my-element><template shadowroot="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element></p>
<p><my-element><template shadowroot="open" shadowrootmode="open"><!--lit-part 8dHorjH6jDo=--><b>shadow content</b><!--/lit-part--></template></my-element></p>
`)
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/labs/ssr/src/lib/render-value.ts
View file
Expand Up @@ -732,7 +732,7 @@ function* renderTemplateResult(
const delegatesfocusAttr = delegatesFocus
? ' shadowrootdelegatesfocus'
: '';
yield `<template shadowroot="${mode}"${delegatesfocusAttr}>`;
yield `<template shadowroot="${mode}" shadowrootmode="${mode}"${delegatesfocusAttr}>`;
yield* shadowContents;
yield '</template>';
}
Expand Down
28 changes: 14 additions & 14 deletions packages/labs/ssr/src/test/lib/render-lit_test.ts
View file
Expand Up @@ -233,7 +233,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
});
assert.is(
result,
`<!--lit-part tjmYe1kHIVM=--><test-simple><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template></test-simple><!--/lit-part-->`
`<!--lit-part tjmYe1kHIVM=--><test-simple><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template></test-simple><!--/lit-part-->`
);
assert.is(customElementsRendered.length, 1);
assert.is(customElementsRendered[0], 'test-simple');
Expand All @@ -247,7 +247,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
});
assert.is(
result,
`<!--lit-part tjmYe1kHIVM=--><test-simple defer-hydration><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template></test-simple><!--/lit-part-->`
`<!--lit-part tjmYe1kHIVM=--><test-simple defer-hydration><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template></test-simple><!--/lit-part-->`
);
});

Expand All @@ -257,7 +257,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part v2CxGIW+qHI=--><test-property ><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
`<!--lit-part v2CxGIW+qHI=--><test-property ><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
);
});

Expand All @@ -267,7 +267,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part ZI1U/5CYP1o=--><test-property foo="bar"><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
`<!--lit-part ZI1U/5CYP1o=--><test-property foo="bar"><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->bar<!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
);
});

Expand All @@ -277,7 +277,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
);
});

Expand All @@ -287,7 +287,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
);
});

Expand All @@ -297,7 +297,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
`<!--lit-part ZI1U/5CYP1o=--><test-property foo><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part--><!--/lit-part--></main><!--/lit-part--></template></test-property><!--/lit-part-->`
);
});

Expand All @@ -307,7 +307,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part 7z41MJchKXM=--><test-reflected-properties bar baz="default reflected string" reflect-foo="badazzled"><!--lit-node 0--><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></test-reflected-properties><!--/lit-part-->`
`<!--lit-part 7z41MJchKXM=--><test-reflected-properties bar baz="default reflected string" reflect-foo="badazzled"><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></test-reflected-properties><!--/lit-part-->`
);
});

Expand All @@ -316,7 +316,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
const result = await render(elementWithDefaultReflectedProperties);
assert.is(
result,
`<!--lit-part tktTsdmfB74=--><test-reflected-properties baz="default reflected string"><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></test-reflected-properties><!--/lit-part-->`
`<!--lit-part tktTsdmfB74=--><test-reflected-properties baz="default reflected string"><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></test-reflected-properties><!--/lit-part-->`
);
});

Expand All @@ -326,7 +326,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
// TODO: we'd like to remove the extra space in the start tag
assert.is(
result,
`<!--lit-part Q0bbGrx71ic=--><test-will-update ><!--lit-node 0--><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->Foo Bar<!--/lit-part--></main><!--/lit-part--></template></test-will-update><!--/lit-part-->`
`<!--lit-part Q0bbGrx71ic=--><test-will-update ><!--lit-node 0--><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main><!--lit-part-->Foo Bar<!--/lit-part--></main><!--/lit-part--></template></test-will-update><!--/lit-part-->`
);
});

Expand All @@ -339,7 +339,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
const result = await render(noSlot);
assert.is(
result,
`<!--lit-part OpS0yFtM48Q=--><test-simple><template shadowroot="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template><p>Hi</p></test-simple><!--/lit-part-->`
`<!--lit-part OpS0yFtM48Q=--><test-simple><template shadowroot="open" shadowrootmode="open"><!--lit-part UNbWrd8S5FY=--><main></main><!--/lit-part--></template><p>Hi</p></test-simple><!--/lit-part-->`
);
});

Expand All @@ -348,7 +348,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
const result = await render(shadowrootOpen);
assert.is(
result,
`<!--lit-part eTOxy3auvsY=--><test-shadowroot-open><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></test-shadowroot-open><!--/lit-part-->`
`<!--lit-part eTOxy3auvsY=--><test-shadowroot-open><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></test-shadowroot-open><!--/lit-part-->`
);
});

Expand All @@ -357,7 +357,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
const result = await render(shadowrootClosed);
assert.is(
result,
`<!--lit-part 35tY6VC7KzI=--><test-shadowroot-closed><template shadowroot="closed"><!--lit-part--><!--/lit-part--></template></test-shadowroot-closed><!--/lit-part-->`
`<!--lit-part 35tY6VC7KzI=--><test-shadowroot-closed><template shadowroot="closed" shadowrootmode="closed"><!--lit-part--><!--/lit-part--></template></test-shadowroot-closed><!--/lit-part-->`
);
});

Expand All @@ -366,7 +366,7 @@ for (const global of [emptyVmGlobal, shimmedVmGlobal]) {
const result = await render(shadowrootdelegatesfocus);
assert.is(
result,
`<!--lit-part Nim07tlWyJ0=--><test-shadowrootdelegatesfocus><template shadowroot="open" shadowrootdelegatesfocus><!--lit-part--><!--/lit-part--></template></test-shadowrootdelegatesfocus><!--/lit-part-->`
`<!--lit-part Nim07tlWyJ0=--><test-shadowrootdelegatesfocus><template shadowroot="open" shadowrootmode="open" shadowrootdelegatesfocus><!--lit-part--><!--/lit-part--></template></test-shadowrootdelegatesfocus><!--/lit-part-->`
);
});

Expand Down

0 comments on commit ca74ff6

Please sign in to comment.