michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Lit] Forwards compatiblity for streaming Declarative Shadow DOM (#6055)

Browse source 
* Forwards compatiblity for streaming DSD

* add shadowrootmode

* update tests

* add changeset
This commit is contained in:
Elliott Marquez 2023-02-01 05:44:56 -08:00 committed by GitHub
parent 724f9dc2d6
commit 2567aa48bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/hip-pots-push.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/lit': patch
---
Add forwards compatibility for streaming Declarative Shadow DOM

6
packages/astro/test/custom-elements.test.js
View file

@ -23,7 +23,7 @@ describe('Custom Elements', () => {
expect($('my-element')).to.have.lengthOf(1); expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendered // test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
}); });
it('Works with exported tagName', async () => { it('Works with exported tagName', async () => {
@ -34,7 +34,7 @@ describe('Custom Elements', () => {
expect($('my-element')).to.have.lengthOf(1); expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendered // test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
}); });
it.skip('Hydration works with exported tagName', async () => { it.skip('Hydration works with exported tagName', async () => {
@ -46,7 +46,7 @@ describe('Custom Elements', () => {
expect($('my-element')).to.have.lengthOf(1); expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendered // test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1); expect($('my-element template[shadowroot=open][shadowrootmode=open]')).to.have.lengthOf(1);
// Hydration // Hydration
// test 3: Component and polyfill scripts bundled separately // test 3: Component and polyfill scripts bundled separately

2
packages/astro/test/fixtures/custom-elements/my-component-lib/server.js vendored
View file

@ -18,7 +18,7 @@ function renderToStaticMarkup(component, props, innerHTML) {
const Component = getConstructor(component); const Component = getConstructor(component);
const el = new Component(); const el = new Component();
el.connectedCallback(); el.connectedCallback();
const html = `<${el.localName}><template shadowroot="open">${el.shadowRoot.innerHTML}</template>${el.innerHTML}</${el.localName}>` const html = `<${el.localName}><template shadowroot="open" shadowrootmode="open">${el.shadowRoot.innerHTML}</template>${el.innerHTML}</${el.localName}>`
return { return {
html html
}; };

2
packages/integrations/lit/client-shim.js
View file

@ -8,7 +8,7 @@ async function polyfill() {
} }
const polyfillCheckEl = new DOMParser() const polyfillCheckEl = new DOMParser()
.parseFromString(`<p><template shadowroot="open"></template></p>`, 'text/html', { .parseFromString(`<p><template shadowroot="open" shadowrootmode="open"></template></p>`, 'text/html', {
includeShadowRoots: true, includeShadowRoots: true,
}) })
.querySelector('p'); .querySelector('p');

4
packages/integrations/lit/client-shim.min.js vendored
View file

@ -8,7 +8,7 @@ var b = (t, n) => {
function s() { function s() {
if (d === void 0) { if (d === void 0) {
let t = document.createElement('div'); let t = document.createElement('div');
(t.innerHTML = '<div><template shadowroot="open"></template></div>'), (t.innerHTML = '<div><template shadowroot="open" shadowrootmode="open"></template></div>'),
(d = !!t.firstElementChild.shadowRoot); (d = !!t.firstElementChild.shadowRoot);
} }
return d; return d;
@ -80,7 +80,7 @@ async function g() {
window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true }); window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true });
} }
var x = new DOMParser() var x = new DOMParser()
.parseFromString('<p><template shadowroot="open"></template></p>', 'text/html', { .parseFromString('<p><template shadowroot="open" shadowrootmode="open"></template></p>', 'text/html', {
includeShadowRoots: !0, includeShadowRoots: !0,
}) })
.querySelector('p'); .querySelector('p');

2
packages/integrations/lit/server.js
View file

@ -62,7 +62,7 @@ function* render(Component, attrs, slots) {
yield `>`; yield `>`;
const shadowContents = instance.renderShadow({}); const shadowContents = instance.renderShadow({});
if (shadowContents !== undefined) { if (shadowContents !== undefined) {
yield '<template shadowroot="open">'; yield '<template shadowroot="open" shadowrootmode="open">';
yield* shadowContents; yield* shadowContents;
yield '</template>'; yield '</template>';
} }

2
packages/integrations/lit/test/server.test.js
View file

@ -38,7 +38,7 @@ describe('renderToStaticMarkup', () => {
customElements.define(tagName, class extends LitElement {}); customElements.define(tagName, class extends LitElement {});
const render = await renderToStaticMarkup(tagName); const render = await renderToStaticMarkup(tagName);
expect(render).to.deep.equal({ expect(render).to.deep.equal({
html: `<${tagName}><template shadowroot="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`, html: `<${tagName}><template shadowroot="open" shadowrootmode="open"><!--lit-part--><!--/lit-part--></template></${tagName}>`,
}); });
}); });