dart - Shadowdom 是否改变了 ids 的规则

Question

问题的答案Cascading style sheets use "id" or "class"表示 id 的

Put an ID on an element if "it is the ..." (e.g. navigation)

以及进一步的评论:

Because of this ids can only be used once (in the page) but elements can be classified multiple times. Also an element can only have one identifier but multiple classifications. However elements can be identified and classified.

有了shadow dom，关于ids只能使用一次(在页面中)的部分还成立吗？例如，获取组件中元素的一个简单方法是为每个组件赋予唯一的 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');

在使用此组件时，组件的多个实例不会发生冲突。这种方法安全还是坏主意？如果安全的话，那么 id 的规则是否已更改？

Answer 1

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

仅供引用，您还可以使用$[]缩写形式的访问器。 Dart 代码:

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