Polymer 2.x中如何使用选择器选中全部元素？

嘿，我帮你捋捋这个问题——看起来你在Polymer 2.x里获取多个.test元素时踩了几个常见的坑，咱们一步步来解决：

首先，先明确核心问题：你用this.shadowRoot.querySelector('.test')只能拿到第一个元素，这是正常的——因为querySelector()本身就只会返回匹配到的第一个节点，要获取所有匹配元素，你得用它的兄弟方法querySelectorAll()才行！

正确的获取方式 #

如果你的.test元素是定义在组件的Shadow DOM内部（也就是<template>标签里的内容），那正确的写法应该是：

const allTestElements = this.shadowRoot.querySelectorAll('.test');

这个方法会返回一个包含所有匹配.test元素的NodeList，你可以通过遍历它来操作每个元素。

为什么其他方法无效？ #

咱们逐个分析你试过的方法：

• document.querySelectorAll('.test') / document.body.querySelectorAll('.test')：Polymer 2.x组件默认使用Shadow DOM，它的核心特性就是封装性——Shadow DOM内部的元素对外部的document是不可见的，所以这两个方法自然拿不到结果。
• this.querySelectorAll('.test')：在Polymer组件实例中，直接调用this.querySelectorAll()是在Light DOM（也就是组件标签内部插入的子元素）里查询，如果你的.test元素不是通过<slot>插入的，而是在组件自己的模板里，那这个方法当然查不到。

举个实际代码例子 #

假设你的组件结构是这样的：

<dom-module id="my-custom-component">
  <template>
    <!-- 这些是Shadow DOM内部的元素 -->
    <div class="test">测试元素1</div>
    <div class="test">测试元素2</div>
    <div class="test">测试元素3</div>
  </template>
  <script>
    class MyCustomComponent extends Polymer.Element {
      static get is() { return 'my-custom-component'; }
      
      connectedCallback() {
        super.connectedCallback();
        // 获取所有.test元素
        const testElements = this.shadowRoot.querySelectorAll('.test');
        // 遍历操作每个元素
        testElements.forEach(el => {
          console.log(el.textContent);
        });
      }
    }
    customElements.define(MyCustomComponent.is, MyCustomComponent);
  </script>
</dom-module>

在connectedCallback里用this.shadowRoot.querySelectorAll('.test')就能拿到所有三个.test元素了。

额外提醒 #

如果你的.test元素是通过<slot>从外部传入组件的（也就是在Light DOM里），那你应该用this.querySelectorAll('.test')来获取——但根据你描述的情况，显然不是这种场景。

内容的提问来源于stack exchange，提问作者KVNA