Question

我无法访问Polymer元素的shadowDom。这是元素的（截断的）代码：

<polymer-element name="word-element" attributes="chars">
  <template>
    <h2>Drag and drop the letters to form anagrams</h2>
    <div id='container'>
      <div class="char" draggable="true">a</div>
      <div class="char" draggable="true">b</div>
      <div class="char" draggable="true">c</div>
      <br>
      <br>
      <template repeat="{{chars}}">
        <div class="char" draggable="true">{{}}</div>
      </template>
    </div>
  </template>
</polymer-element>

这是Dart代码的样子：

@CustomTag("word-element")
class WordElement extends PolymerElement with ObservableMixin {
  @observable List chars;

inserted() {
    var charDivs = this.shadowRoot.queryAll('.char');
    print(charDivs.length);
}

charDivs.length总是返回3，计算我已经硬编码到<div>的3 <template>个。使用<template repeat="{{chars}}">无法发现在shadowRoot代码中创建的任何div。任何想法为什么会出现这种情况？

此外，当我将样式应用于具有类char的元素时，样式将应用于所有 <div>，包括在{{1}内创建的样式}。但是使用repeat只返回硬编码的div。

Answer 1

您可以使用Mutation Observers。正如其他地方所提到的，模板绑定和重复是在创建和插入自定义元素之后的某个时间异步发生的。

使用Mutation Observer在修改节点或其子树时收到通知。

这是Dart代码：

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';

@CustomTag("my-element")
class MyElement extends PolymerElement with ObservableMixin {
  final List<String> timestamps = toObservable([]);
  MutationObserver observer;

  created() {
    super.created();

    observer = new MutationObserver(_onMutation);
    observer.observe(shadowRoot.query('#timestamps'), childList: true, subtree: true);

    new Timer.periodic(const Duration(seconds: 1), (t) {
      timestamps.add(new DateTime.now().toString());
    });
  }

  // Bindings, like repeat, happen asynchronously. To be notified
  // when the shadow root's tree is modified, use a MutationObserver.

  _onMutation(List<MutationRecord> mutations, MutationObserver observer) {
    print('${mutations.length} mutations occurred, the first to ${mutations[0].target}');
  }
}

这是HTML代码：

<polymer-element name="my-element">
  <template>
    <ul id="timestamps">
      <template repeat="{{ts in timestamps}}">
        <li>{{ts}}</li>
      </template>
    </ul>
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element>

Answer 2

尝试将查询放入Timer.run。

Timer.run(() {
  print("timer");
  var charDivs = this.shadowRoot.queryAll('.char');
  print("charsDiv: ${charDivs.length}");
});

然后，当我使用列表填充chars="{{someList}}"属性时，例如：['d','e','f']，我会返回完整集（即length=6）。

这是一个演示完整代码的要点：https://gist.github.com/chrisbu/6488370

ShadowRoot在Polymer中没有找到模板内的元素重复

2 个答案: