shadowdom是否更改了ids的规则

Question

问题的答案 层叠样式表使用"id"或"class" 对身份证说

在一个元素上放一个ID，如果"它是"。.."（例如导航)

和进一步的评论:

因此，id只能使用一次（在页面中），但元素可以分类多次。此外，一个元素只能有一个标识符，但有多个分类。然而，元素可以被识别和分类。

使用shadow 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，以及，你也可以使用 $[] 缩短形式的访问器。Dart代码:

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