Question

问题Cascading style sheets use "id" or "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将您的组件彼此封装。因此，您可以拥有标识为rate的组件，并且该组件仅在该组件中使用一次。即使您在同一页面中多次使用该组件，ID也会相互封装。

同样快速的FYI，您也可以使用$[]访问者来缩短表格。飞镖代码：

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

shadowdom是否会改变ID的规则

1 个答案: