如何选中shadow-root内全部元素？为轮播幻灯片批量添加类名

问题出在你只获取了第一个#rs-two-col元素，且使用querySelectorAll时错误地直接链式调用shadowRoot——querySelectorAll返回的是元素集合（NodeList），集合本身没有shadowRoot属性，必须遍历集合中的每个元素单独处理。

修正后的代码 #

// 拿到所有包含shadow root的#rs-two-col元素
const slideContainers = document.querySelectorAll("#ipm-ad-modal-div #rs-two-col");

// 遍历每个容器，处理对应的shadow root内元素
slideContainers.forEach(container => {
  // 确保当前容器存在open模式的shadow root
  if (container.shadowRoot) {
    const wrapper = container.shadowRoot.querySelector(".wrapper");
    if (wrapper) {
      wrapper.classList.add("hidden");
    }
  }
});

额外提示 #

HTML规范中id属性必须唯一，你代码里重复使用了id="rs-two-col"，这会导致语义错误。建议将id改为class，比如class="rs-two-col"，然后JS中用document.querySelectorAll("#ipm-ad-modal-div .rs-two-col")来获取元素，这样更符合标准。

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