在Gridster中加载Perspective库后主题按钮点击失效求助

核心原因是Shadow DOM的封闭性，常规jQuery选择器无法穿透Shadow Root定位元素，得直接操作Shadow Root内部DOM来绑定事件，具体方案如下：

1. 获取Perspective组件的Shadow Root #

先定位页面上的Perspective元素，再获取它的shadowRoot属性（需确保组件已初始化完成，Shadow Root已生成）：

// 替换为你页面中Perspective元素的实际选择器（类名/ID/标签名）
const perspectiveViewer = document.querySelector('perspective-viewer');
const shadowRoot = perspectiveViewer.shadowRoot;

2. 直接在Shadow Root内绑定点击事件 #

用原生JS直接选择Shadow Root内的主题按钮并绑定事件，比jQuery更可靠：

// 单个主题按钮的情况
const themeBtn = shadowRoot.querySelector('.psv-theme-selector-button');
themeBtn.addEventListener('click', function() {
  // 获取按钮对应的主题值（根据Perspective实际DOM结构调整属性名）
  const targetTheme = this.dataset.theme;
  // 调用Perspective的主题设置API
  perspectiveViewer.setAttribute('theme', targetTheme);
});

// 多个主题按钮的循环绑定
const themeButtons = shadowRoot.querySelectorAll('.psv-theme-selector-button');
themeButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const targetTheme = this.dataset.theme;
    perspectiveViewer.setTheme(targetTheme); // 或用setAttribute，取决于Perspective的API
  });
});

3. 确保在组件加载完成后执行绑定 #

Perspective初始化完成后才会生成Shadow Root，所以要监听它的加载完成事件：

document.addEventListener('perspective-viewer-loaded', function() {
  const perspectiveViewer = document.querySelector('perspective-viewer');
  const shadowRoot = perspectiveViewer.shadowRoot;
  
  const themeButtons = shadowRoot.querySelectorAll('.psv-theme-selector-button');
  themeButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      const targetTheme = this.dataset.theme;
      perspectiveViewer.setAttribute('theme', targetTheme);
    });
  });
});

4. 处理Gridster的事件拦截问题 #

如果Gridster的拖拽/布局逻辑阻止了事件冒泡，可在事件处理函数中阻止事件向上传播：

btn.addEventListener('click', function(e) {
  e.stopPropagation(); // 避免Gridster拦截点击事件
  const targetTheme = this.dataset.theme;
  perspectiveViewer.setAttribute('theme', targetTheme);
});

（可选）用jQuery操作Shadow Root内元素 #

若坚持使用jQuery，需将Shadow Root作为上下文传入：

const shadowRoot = document.querySelector('perspective-viewer').shadowRoot;
$(shadowRoot).find('.psv-theme-selector-button').on('click', function() {
  const targetTheme = $(this).data('theme');
  $('perspective-viewer').attr('theme', targetTheme);
});

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