Open
Description
Which package(s) are affected?
Lit Core (lit / lit-html / lit-element / reactive-element)
Description
@justinfagnani It looks like the changes of PR #4975 cause some unforseen behaviour. When using the CustomElement below to reshuffle a list of items with varying length via the repeat directive by pressing the button, I see markers <!----> being added and never being removed within the ul element; resulting in hundreds of dangling markers. When reverting this PR everything seems to behave as expected.
Could you please verify? Thanks!
Reproduction
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>App</title>
<script type="module">
//*! Import 'html' and 'render' versions from this PR !*/
// Import the latest 'repeat' directive
import { repeat } from 'https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/repeat.js';
const fruits = [{
name: 'apple',
text: '🍎'
},
{
name: 'banana',
text: '🍌'
},
{
name: 'grapes',
text: '🍇'
},
{
name: 'pineapple',
text: '🍍'
},
{
name: 'peach',
text: '🍑'
},
{
name: 'cherry',
text: '🍒'
},
{
name: 'greenapple',
text: '🍏'
},
{
name: 'melon',
text: '🍉'
},
{
name: 'strawberry',
text: '🍓'
},
];
customElements.define(
'x-app',
class App extends HTMLElement {
#fruits = [...fruits];
connectedCallback() {
this.render();
}
shuffleFruits = () => {
const size = Math.floor(Math.random() * fruits.length) + 1;
this.#fruits = fruits.sort(() => Math.random() - 0.5).slice(-size);
console.log(this.#fruits.concat());
this.render();
};
render() {
render(
html`
<main>
<button @click=${this.shuffleFruits}>Shuffle Fruits</button>
<ul>
${repeat(
this.#fruits,
fruit => fruit.name,
fruit =>
html`<li>
<label>
<input name=${fruit.name} type="checkbox" />
${fruit.name} - ${fruit.text}
</label>
</li>`,
)}
</ul>
</main>
`,
this,
);
}
},
);
</script>
</head>
<body>
<x-app></x-app>
</body>
</html>
Workaround
Locally reverted the changes of mentioned PR
Is this a regression?
Yes. This used to work, but now it doesn't.
Affected versions
Fails in to be released version, works in latest lit-html 3.3.0
Browser/OS/Node environment
Browser: Chrome 137.0.7151.70 (Official Build) (64-bit)
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Status
No status