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

Question

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

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

Polymer 2.0 中没有 queryEffectiveChildren 函数 Polymer.Element，那么我应该使用什么来执行上述检查？

Answer 1

您可以使用 Polymer.LegacyElementMixin to use 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

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

When upgrading to Polymer 2.0, what should I use to replace queryEffectiveChildren() in a Polymer.Element

polymer

polymer-2.x