shadowdom是否会改变ID的规则

Question

问题级联样式表的答案使用"id"或"class"表示id

如果"它是......"(例如导航),请在元素上放置ID

还有一个评论:

因为这个ID只能使用一次(在页面中),但元素可以被分类多次.元素也只能有一个标识符,但只能有多个分类.但是,可以识别和分类元素.

使用阴影dom,关于id的部分是否可以使用一次(在页面中)仍然可以使用？例如,获取组件中元素的一种简单方法是为每个id赋予组件唯一的查询权限:

在html中:

<input id="amount" placeholder="Amount" on-change="{{recalc}}"></input>
<input id="term-years" placeholder="Term (yrs) e.g. 30" on-change="{{recalc}}"></input>
<input id="rate" placeholder="Interest Rate" on-change="{{recalc}}"></input>

在Dart代码中:

termYearsElm = shadowRoot.querySelector('#term-years');
amountElm = shadowRoot.querySelector('#amount');
rateElm = shadowRoot.querySelector('#rate');

在玩这个时,组件的多个实例不会发生冲突.这种方法安全还是坏主意？如果它是安全的,那么ids的规则是否已经改变？

Answer 1

是的,在组件的元素上使用ID是完全合法的,只要它是1)该组件的唯一,以及2)该组件具有shadowDOM.shadowDOM将您的组件彼此封装.因此,您可以拥有一个具有id的组件,rate并且在该组件中仅使用一次.即使您在同一页面中多次使用该组件,ID也会相互封装.

同样快速的FYI,您也可以使用$[]访问者缩小表格.飞镖码:

termYearsElm = $['term-years'];
amountElm = $['amount'];
rateElm = $['rate'];