如何为Ember.js的DOM元素设置刷新后不变的唯一ID（除data-test选择器）

• 手动给模板元素加固定ID
  直接在Ember模板里给目标元素指定固定的id属性就行，Ember不会自动覆盖手动设置的ID，刷新页面后ID完全保持不变。比如：

<button id="priority-navbar-item">优先级导航项</button>

注意要保证这个ID在整个应用里是唯一的，别和其他元素重复。

• 给自定义组件设置固定elementId
  如果是自己写的Ember组件，可以在组件类里通过elementId属性固定根元素的ID：

// app/components/priority-navbar-item.js
import Component from '@glimmer/component';

export default class PriorityNavbarItemComponent extends Component {
  elementId = 'priority-navbar-item';
}

这样组件渲染后的根元素就会一直用这个ID，不管页面刷新多少次都不会变。

• 自定义专属数据属性
  要是不想用标准ID，也可以自定义一个专门给Product Fruits用的数据属性，比如data-pf-target-id，然后在Product Fruits的配置里选择用这个属性定位元素：

<button data-pf-target-id="priority-navbar-item">优先级导航项</button>

这种方式和data-test选择器逻辑类似，但专门为引导流程服务，避免和测试用的选择器混淆，同样能保证属性值在刷新后不变。

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