Dart Web UI: How do I get a reference to an item within in a web component? -
if add number of web components app in myapp.html below:
<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> and have number of elements in web component in xclick-counter.html below:
<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> how reference #button2 in web component in #container3 myapp.dart?
i expect can reference below reference turns out null:
var reference=document.query('#container1').query('#button2');
generally, shouldn't try that. :) shadow dom encapsulation boundary, , custom element's template contents should hidden implementation details. think of custom element class. don't want reach class , see private fields, don't want reach custom element , see nodes inside shadow dom.
having said that, i'd make suggestion:
web ui not keep ids (from inside custom elements) unique on page. every instance of x-click-counter, page have duplicated button1 , button2 elements.
i opened https://github.com/dart-lang/web-ui/issues/492 track issue.
the workaround use classes instead of ids. then, can give host element id, did in code. try changing this:
<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>
Comments
Post a Comment