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 Matthew Phillips
parent 7944d28482
commit b5c6a9355c
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);
// 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 () => {
@ -34,7 +34,7 @@ describe('Custom Elements', () => {
expect($('my-element')).to.have.lengthOf(1);
// 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 () => {
@ -46,7 +46,7 @@ describe('Custom Elements', () => {
expect($('my-element')).to.have.lengthOf(1);
// 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
// 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 el = new Component();
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 {
html
};

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

@ -8,7 +8,7 @@ async function polyfill() {
}
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,
})
.querySelector('p');

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

@ -8,7 +8,7 @@ var b = (t, n) => {
function s() {
if (d === void 0) {
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);
}
return d;
@ -80,7 +80,7 @@ async function g() {
window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true });
}
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,
})
.querySelector('p');

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

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

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

@ -38,7 +38,7 @@ describe('renderToStaticMarkup', () => {
customElements.define(tagName, class extends LitElement {});
const render = await renderToStaticMarkup(tagName);
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}>`,
});
});