升级到Polymer 2.0时，我应该使用什么来替换Polymer.Element中的queryEffectiveChildren（）

Question

我有一个Polymer 1元素，它使用queryEffectiveChildren（）来检查插槽的DOM是否已填充：

if(this.queryEffectiveChildren('[slot="description"]').childElementCount > 0) {

在Polymer 2.0的Polymer.Element中找不到queryEffectiveChildren函数，那么我应该使用什么来执行上述检查呢？

Answer 1

您可以使用Polymer.LegacyElementMixin来使用queryEffectiveChildren（或其他旧版API）：

customElements.define('x-foo', class extends Polymer.LegacyElementMixin(Polymer.Element) {
  connectedCallback() {
    super.connectedCallback();
    let x = this.queryEffectiveChildren('[slot="description"]');
    // ...
  }
});

demo

或等效，如2.0 upgrade guide：

中所述

customElements.define('x-foo', class extends Polymer.LegacyElementMixin(Polymer.Element) {
  connectedCallback() {
    super.connectedCallback();
    let x = Polymer.FlattenedNodesObserver
              .getFlattenedNodes(this)
              .filter(n => n.nodeType === Node.ELEMENT_NODE)
              .filter(n => n.parentNode.querySelector('[slot="description"]') === n);
              // OR: .filter(n => n.getAttribute('slot') === 'description');
  }
});

demo