does shadowdom change the rules for ids

Question

The answer to question Cascading style sheets use "id" or "class" says for id's

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

and a further comment:

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.

With shadow dom, does the part about ids can be used once (in the page) still hold? For example, a simple way to grab elements in the component is to give each id's unique to the component and query them:

In 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>

In Dart code:

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

In playing with this, multiple instances of the component do not conflict. Is this approach safe or a bad idea? If it is safe then have the rules for ids have changed?

Answer 1

Yes it is perfectly legitimate to use an ID on an element of a component as long as it is 1) Unique to that component, and 2) The component has a shadowDOM. The shadowDOM encapsulates your components from each other. Thus you can have a component with id rate and it is used only once within that component. Even if you use that component multiple times within the same page the id's are encapsulated from each other.

Just a quick FYI as well, you can also use the $[] accessor for a shortened form. Dart code:

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