现在 selected 属性需要真正发挥作用了。使用元素的 slot 来管理选中项目的显示。由于只有分配到插槽的元素才会被渲染，只分配选中的项目将只渲染它而不渲染其他内容。

更新 render 方法，添加插槽名称。

<div class="fit">
  <slot name="selected"></slot>
</div>

这将 slot 的 name 属性设置为 selected，这样就只显示选中的项目。

现在在 render 方法下方添加以下代码。

private previous = 0;
protected updated(changedProperties: PropertyValues) {
  if (changedProperties.has('selected') && this.hasValidSelected()) {
    this.updateSlots();
    this.previous = this.selected;
  }
}

private updateSlots() {
  this.children[this.previous]?.removeAttribute('slot');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

previous = 0;
updated(changedProperties) {
  if (changedProperties.has('selected') && this.hasValidSelected()) {
    this.updateSlots();
    this.previous = this.selected;
  }
}

updateSlots() {
  this.children[this.previous]?.removeAttribute('slot');
  this.children[this.selected]?.setAttribute('slot', 'selected');
}

updated 方法首先使用 changedProperties 参数和 hasValidSelected() 的结果来检查是否需要执行任何操作。

如果需要，updateSlots 方法将选中元素的 slot 设置为 selected。由于选中的项目不会被 Lit 渲染，因此需要使用命令式代码直接管理它。跟踪之前选中的项目，以便在 selected 变化时可以取消其插槽分配。

在大多数情况下，不建议直接操作元素的 Light DOM 子元素。

Light DOM 子元素不属于元素封装的 Shadow DOM 的一部分，因此提供 Light DOM 子元素的用户可能会对它们进行不可预见的操作，从而撤消你的 DOM 修改。

然而，在这种情况下，对选中项目的更改直接关系到元素的核心目的。此外，slot 元素有一个 assign 方法，可以避免将元素的 slot 属性与插槽的名称进行匹配。不过，在编写本教程时，该方法尚未得到广泛支持，因此这里的代码设置了元素的 slot 属性。

要验证更改选中的项目是否符合预期，打开 index.html 并在 motion-carousel 元素上添加 selected="1" 属性。设置该属性将同时设置属性值，并应显示相应的图片。