1

以下の myapp.html のように、多数の Web コンポーネントをアプリに追加すると:

<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 のように、Web コンポーネントにいくつかの要素があります。

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

myApp.dart から #container3 の Web コンポーネントの #button2 への参照を取得するにはどうすればよいですか?

私は以下のように参照を取得できると期待していますが、私の参照はnullであることが判明しました:

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

1 に答える 1

2

一般的に、それをしようとすべきではありません。:) Shadow DOM はカプセル化の境界であり、カスタム要素のテンプレート コンテンツは実装の詳細として非表示にする必要があります。カスタム要素はクラスのようなものと考えてください。カスタム要素にアクセスして Shadow DOM 内のノードを見たくないのと同じように、クラスにアクセスしてプライベート フィールドを見たくありません。

そうは言っても、私は提案をしたいと思います：

Web UI は現在、(カスタム要素内からの) ID をページ上で一意に保ちません。x-click-counter のインスタンスごとに、ページには重複した button1 要素と button2 要素があります。

問題を追跡するためにhttps://github.com/dart-lang/web-ui/issues/492を開きました。

回避策は、ID の代わりにクラスを使用することです。次に、コードで行ったように、ホスト要素に ID を指定できます。これに変更してみてください：

  <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-03T04:38:22.313 に答える