LitElement父组件排序数组后子组件滑块渲染异常问题

三个问题叠加导致异常：

• repeat指令未配置稳定业务key，默认用数组索引做节点标识
  Lit的repeat指令如果只传入两个参数，会默认使用数组索引作为DOM节点的唯一key。当数组排序后，索引对应的活动项发生变化，但Lit不会移动已生成的DOM和组件实例，只会原地给现有组件替换传入的activity属性。被用户拖动过的滑块，交互状态是直接存在原生DOM上的，不会随属性替换自动更新，就会停在原来的位置。
• 原生range表单控件的脏状态限制
  浏览器对表单控件有内置脏状态标记：只要用户通过交互修改过控件值，后续仅修改元素上的value attribute（即HTML标签上声明的value属性），不会同步更新控件的实际视觉状态，必须修改DOM元素的value property才能触发视图更新。你当前模板里用的是attribute绑定方式设置滑块值，用户拖动滑块后，attribute和控件内部状态脱节，就会出现DOM上value属性看着正确、滑块位置不对的现象。
• 直接修改传入对象的属性，绕过更新检测
  你在评分保存逻辑里直接修改this.activity对象的属性值，由于activity是父组件传入的对象引用，对象本身内存地址没有变化，Lit无法自动检测到属性变更，不会触发完整的重渲染流程。

按以下步骤修改即可解决：

1. 给repeat指令配置稳定的业务key #

使用活动的唯一标识（比如活动id）作为列表项的key，让Lit在排序时可以正确移动对应的DOM和组件实例，而不是原地复用节点：

${repeat(
  this.activityListLocal,
  // 用活动id作为稳定key，不要用数组索引
  activity => activity.id,
  // 第三个参数传入模板渲染函数
  activity => html`
    <div class="activity-container">
      <div class="activity">
        <activity-info .activity=${activity}></activity-info>
      </div>
      <div class="activity rating">
        <activity-rating
          .activity=${activity}
          @appactivityremoveclick=${() => this.deleteActivity(activity)}
        ></activity-rating>
      </div>
    </div>
  `
)}

注意：原代码中rating容器div写了两个class属性，后写的会覆盖前一个，需要把两个类名合并到同一个class属性中。

2. 改用property方式绑定滑块值 #

将两个滑块的value attribute绑定改为.value property绑定，直接操作DOM元素的value属性，绕过浏览器脏状态限制，保证值和视觉状态同步：

<!-- 整体评分滑块 -->
<input
  type="range"
  min="0"
  max="100"
  .value=${this.activity.avgRating ?? 0}
  class="slider"
  id="overallRating"
  disabled
/>

<!-- 我的评分滑块 -->
<input
  type="range"
  min="0"
  max="100"
  .value=${this.activity.personalRating ?? 0}
  class="slider"
  id="myRating"
  @change="${(e: Event) => this.readcurrentSliderValue(e)}"
/>

3. 遵循单向数据流规范 #

不要在子组件中直接修改父组件传入的activity对象属性，评分更新完成后，应该通过事件通知父组件修改源列表中的对应数据，保证数据变更能被Lit的响应式系统检测到，触发完整的视图更新。

内容的提问来源于stack exchange，提问作者Keayne