需要更新插槽以正确渲染之前和当前选中的项目。

在 selected 属性访问器上方添加以下代码：

import {customElement, property, query} from 'lit/decorators.js';
...
export class MotionCarousel extends LitElement {
  @query('slot[name="selected"]', true)
  private selectedSlot!: HTMLSlotElement;

  @query('slot[name="previous"]', true)
  private previousSlot!: HTMLSlotElement;
  ...

get selectedSlot() {
  return (this.__selectedSlot ??=
    this.renderRoot?.querySelector('slot[name="selected"]') ?? null);
}

get previousSlot() {
  return (this.__previousSlot ??=
    this.renderRoot?.querySelector('slot[name="previous"]') ?? null);
}

@query 装饰器提供了对 slot 元素的便捷访问。它将用于查看它们当前的 assignedElements。

querySelector 提供了对 slot 元素的便捷访问。它将用于查看它们当前的 assignedElements。

找到 updateSlots 方法并按如下方式修改：

private updateSlots() {
  // 取消之前的插槽状态
  this.selectedSlot.assignedElements()[0]?.removeAttribute('slot');
  this.previousSlot.assignedElements()[0]?.removeAttribute('slot');
  // 设置插槽
  this.children[this.previous]?.setAttribute('slot', 'previous');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

updateSlots() {
  // 取消之前的插槽状态
  this.selectedSlot.assignedElements()[0]?.removeAttribute('slot');
  this.previousSlot.assignedElements()[0]?.removeAttribute('slot');
  // 设置插槽
  this.children[this.previous]?.setAttribute('slot', 'previous');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

updateSlots 方法移除当前分配的元素，然后将 previous 和 selected 值对应的项目分配到插槽中。