меняет ли Shadowdom правила для идентификаторов

В ответе на вопрос каскадные таблицы стилей используют идентификатор или класс для идентификаторов

Добавьте идентификатор к элементу, если "это ..." (например, навигация)

и еще один комментарий:

Из-за этого идентификаторы можно использовать только один раз (на странице), но элементы можно классифицировать несколько раз. Также элемент может иметь только один идентификатор, но несколько классификаций. Однако элементы можно идентифицировать и классифицировать.

При использовании shadow dom, можно ли использовать часть идентификаторов один раз (на странице)? Например, простой способ получить элементы в компоненте - дать каждому идентификатору, уникальный для компонента, и запросить их:

В 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');

При игре с этим несколько экземпляров компонента не конфликтуют. Этот подход безопасен или плохая идея? Если это безопасно, изменились ли правила для идентификаторов?


person user1338952    schedule 16.11.2013    source источник


Ответы (1)


Да, совершенно законно использовать идентификатор для элемента компонента, если он 1) Уникален для этого компонента и 2) Компонент имеет shadowDOM. ShadowDOM инкапсулирует ваши компоненты друг от друга. Таким образом, у вас может быть компонент с идентификатором rate, и он используется только один раз в этом компоненте. Даже если вы используете этот компонент несколько раз на одной странице, идентификаторы инкапсулируются друг от друга.

Просто к сведению, вы также можете использовать аксессор $[] для укороченная форма. Код дротика:

termYearsElm = $['term-years'];
amountElm = $['amount'];
rateElm = $['rate'];
person Matt B    schedule 20.11.2013
comment
Я попробовал $ ['срок-годы'], и это не сработало. Где это '$ [..]' определено / задокументировано? - person user1338952; 20.11.2013
comment
Извините, что добавила ссылку на API в свой ответ. - person Matt B; 20.11.2013
comment
Прохладный. Я по ошибке оставил "#" в ключе. Хорошее сокращение шаблонов. - person user1338952; 20.11.2013