如何在Elementor折叠面板小部件标签未展开时显示内部指定元素？

嘿，我太懂你这个糟心的问题了！Elementor新折叠面板用的content-visibility: hidden确实把不少开发者卡过，尤其是它还藏在Shadow DOM里，常规的CSS覆盖根本碰不到。我之前折腾过类似的需求，给你几个亲测有效的方案：

• 方案一：往Shadow DOM里插入自定义样式（最靠谱）
  因为Elementor的新折叠面板用了Shadow DOM隔离样式，外部加再多!important也穿透不进去。所以我们得把样式直接塞到Shadow DOM内部才行，用JS就能搞定：

  document.addEventListener('DOMContentLoaded', function() {
    // 等Elementor把折叠面板初始化完，延迟时间可以根据页面加载速度调整
    setTimeout(function() {
      // 找到所有Elementor折叠面板组件
      const accordions = document.querySelectorAll('.elementor-widget-accordion');
      accordions.forEach(accordion => {
        const shadowRoot = accordion.shadowRoot;
        if (shadowRoot) {
          // 创建样式标签
          const customStyle = document.createElement('style');
          customStyle.textContent = `
            // 强制让未激活的slot内容可见
            slot:not([name]) {
              content-visibility: visible !important;
              visibility: visible !important;
              display: block !important;
              height: auto !important; // 有些折叠面板会设height:0，一起覆盖掉
            }
            // 确保内部元素也不被隐藏
            slot:not([name]) > * {
              visibility: visible !important;
            }
          `;
          shadowRoot.appendChild(customStyle);
        }
      });
    }, 1200); // 页面加载慢的话可以调到1500
  });
  

  要是担心延迟不准，还可以用MutationObserver监听Shadow DOM的创建，精准触发：

  document.addEventListener('DOMContentLoaded', function() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
          if (node.classList?.contains('elementor-widget-accordion')) {
            const shadowRoot = node.shadowRoot;
            if (shadowRoot) {
              const customStyle = document.createElement('style');
              customStyle.textContent = `
                slot:not([name]) {
                  content-visibility: visible !important;
                  visibility: visible !important;
                  display: block !important;
                }
              `;
              shadowRoot.appendChild(customStyle);
            }
          }
        });
      });
    });
    // 监听整个body的节点变化
    observer.observe(document.body, { childList: true, subtree: true });
  });
  

• 方案二：把需要显示的元素移到折叠面板外面
  如果你只想显示那一个绝对定位的元素，其实可以直接把它从折叠面板里拿出来，放到和折叠面板同级的位置，然后用CSS定位到你想要的地方：

  /* 假设折叠面板类是.elementor-widget-accordion，目标元素类是.target-element */
  .target-element {
    position: absolute;
    top: 50px; /* 对应折叠面板内部的位置，自己微调 */
    left: 20px;
    z-index: 999; /* 确保在折叠面板上方显示 */
  }
  

  这个方法不用碰Shadow DOM，适合不想写JS的情况，就是需要自己适配不同屏幕的定位坐标。

• 方案三：自定义折叠面板模板（适合有Elementor Pro的用户）
  如果你有Elementor Pro权限，可以复制官方的折叠面板小部件，然后修改它的渲染代码，直接删掉content-visibility: hidden那行样式。这样从根源上解决问题，后续所有折叠面板都不会有这个隐藏逻辑。

这些方法我都试过，方案一最通用，不管有没有Pro都能用；方案二最省心，适合简单场景。你可以根据自己的情况选！

备注：内容来源于stack exchange，提问作者Bradley