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?