Dart Web UI: Как получить ссылку на элемент внутри веб-компонента?

Если добавить несколько веб-компонентов в мое приложение, как в myapp.html ниже:Dart Web UI: Как получить ссылку на элемент внутри веб-компонента?

<head> 
    <link rel="components" href="package:xclickcounter/xclickcounter.html"> 
</head> 
<body> 
    <div id="container1"><x-click-counter></x-click-counter></div> 
    <div id="container2"><x-click-counter></x-click-counter></div> 
    <div id="container3"><x-click-counter></x-click-counter></div> 
    <div id="container4"><x-click-counter></x-click-counter></div> 
    ... 
</body>

И у меня есть количество элементов в моем веб-компонента, как в xclick-counter.html ниже:

<html><body> 
    <element name="x-click-counter" constructor="CounterComponent" extends="div"> 
    <template> 
     <button id="button1" on-click="increment()">\\\Increment me</button> 
     <button id="button2" on-click="decrement()">Decrement me</button> 
     <span>(click count: {{count}})</span> 
    </template> 
    </element> 
<!-- more below... --> 
</body></html>

Как получить ссылку на # button2 в веб-компоненте в # container3 из myApp.dart?

Я бы ожидать, что я могу получить ссылку, как показано ниже, но моя ссылка оказывается пустой:

var reference=document.query('#container1').query('#button2');

источник

2013-05-02 Ken M

Как правило, вы не должны пытаться сделать это. :) Shadow DOM является границей инкапсуляции, а содержимое шаблона пользовательского элемента должно быть скрыто как детали реализации. Подумайте о пользовательском элементе, таком как класс. Вы не хотите входить в класс и видеть частные поля, так же, как вы не хотите входить в пользовательский элемент и видеть узлы внутри Dadow DOM.

Сказав, что я хотел бы сделать предложение:

Web UI в настоящее время не хранить идентификаторы (внутри пользовательских элементов) уникальный на этой странице. Для каждого экземпляра x-click-counter на странице будут дублированы элементы button1 и button2.

Я открыл https://github.com/dart-lang/web-ui/issues/492, чтобы отслеживать проблему.

Обходным путем является использование классов вместо идентификаторов. Затем вы можете указать элементу хоста идентификатор, как и в вашем коде. Попробуйте изменить это:

<element name="x-click-counter" constructor="CounterComponent" extends="div"> 
    <template> 
     <button class="button1" on-click="increment()">\\\Increment me</button> 
     <button class="button2" on-click="decrement()">Decrement me</button> 
     <span>(click count: {{count}})</span> 
    </template> 
    </element>

источник

2013-05-03 04:38:22

Спасибо за отличный ответ. Я, как правило, обходным путем, как представляется, не работает как мой код «reference = document.query ('# container1'). Query ('. Button2'); по-прежнему отображается как null. Полагаю, в итоге я не ищу, чтобы мои веб-компоненты были полностью инкапсулированы, и мне нужен эквивалент публичных полей и также как частные поля. –

Вы можете прочитать больше о Shadow DOM: http : //www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ Это может предоставить больше контекста. –

Спасибо за ссылку на учебник. Это объясняет многое, и я обновил свой код, чтобы устранить необходимость доступа к инкапсулированным элементам. –

Dart Web UI: Как получить ссылку на элемент внутри веб-компонента?

ответ

Смежные вопросы