diff options
| -rw-r--r-- | .changeset/hip-pots-push.md | 5 | ||||
| -rw-r--r-- | packages/astro/test/custom-elements.test.js | 6 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/custom-elements/my-component-lib/server.js | 2 | ||||
| -rw-r--r-- | packages/integrations/lit/client-shim.js | 2 | ||||
| -rw-r--r-- | packages/integrations/lit/client-shim.min.js | 4 | ||||
| -rw-r--r-- | packages/integrations/lit/server.js | 2 | ||||
| -rw-r--r-- | packages/integrations/lit/test/server.test.js | 2 |
7 files changed, 14 insertions, 9 deletions
diff --git a/.changeset/hip-pots-push.md b/.changeset/hip-pots-push.md new file mode 100644 index 000000000..b8707541c --- /dev/null +++ b/.changeset/hip-pots-push.md @@ -0,0 +1,5 @@ +--- +'@astrojs/lit': patch +--- + +Add forwards compatibility for streaming Declarative Shadow DOM diff --git a/packages/astro/test/custom-elements.test.js b/packages/astro/test/custom-elements.test.js index b66c648a4..51e8ece34 100644 --- a/packages/astro/test/custom-elements.test.js +++ b/packages/astro/test/custom-elements.test.js @@ -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 diff --git a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js index 7e36a26fd..688923159 100644 --- a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js +++ b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js @@ -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 }; diff --git a/packages/integrations/lit/client-shim.js b/packages/integrations/lit/client-shim.js index ca97b92cc..c457710b7 100644 --- a/packages/integrations/lit/client-shim.js +++ b/packages/integrations/lit/client-shim.js @@ -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'); diff --git a/packages/integrations/lit/client-shim.min.js b/packages/integrations/lit/client-shim.min.js index afae053ac..0965e6a78 100644 --- a/packages/integrations/lit/client-shim.min.js +++ b/packages/integrations/lit/client-shim.min.js @@ -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'); diff --git a/packages/integrations/lit/server.js b/packages/integrations/lit/server.js index 48a3c646f..da571466f 100644 --- a/packages/integrations/lit/server.js +++ b/packages/integrations/lit/server.js @@ -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>'; } diff --git a/packages/integrations/lit/test/server.test.js b/packages/integrations/lit/test/server.test.js index e7b5e98f9..439c0877d 100644 --- a/packages/integrations/lit/test/server.test.js +++ b/packages/integrations/lit/test/server.test.js @@ -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}>`, }); }); |