R Shiny 基于JavaScript自定义标签页第二个标签无法渲染

使用原生JavaScript在Shiny中实现自定义标签集（tabsets）功能：一方面作为练习学习JavaScript用法、掌握Shiny的底层运行逻辑，另一方面开发样式自定义灵活度更高的标签组件，满足多样化UI定制需求。
参考前端方案编写的实现代码在纯前端测试环境可正常运行，但在Shiny中运行时出现异常：Shiny无法识别第二个标签的激活状态，不会触发标签内的响应式元素渲染逻辑，导致第二个标签内的图表无法生成，仅第一个标签内容可正常展示。

可复现问题的初始代码如下：

js <- shiny::HTML('
<script>
const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");

// "activate" the first content
contents[0].classList.add("show-content");
tabs[0].classList.add("active-nav");

tabs.forEach(tab => tab.addEventListener("click", function() {
  // remove active-nav and show-content classes
  tabs.forEach(tab => tab.classList.remove("active-nav"));
  contents.forEach(c => c.classList.remove("show-content"));
  
  // highlight the contents
  document.getElementById(tab.id).classList.add("active-nav");
  document.getElementById(tab.id + "-content").classList.add("show-content");
}));
</script>
')
css <- shiny::HTML(
'
<style>
ul {
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 10px;
  cursor: pointer;
}

.active-nav {
  background: lightgrey;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show-content {
  display: block;
  background: lightgray;
}
</style>
'
)

ui <- div(
  tags$ul(
    tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"),
    tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP")
  ),
  
  div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP",
      p("1 first tab"),
      plotOutput("plot1")
      ),
  
  div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP",
      p("2 second tab"),
      plotOutput("plot2")),
  
  css,
  js
)



server <- function(input, output, session) {
  output$plot1 <- renderPlot({
    plot(1:10, rnorm(10))
  })
  output$plot2 <- renderPlot({
    plot(1:100, rnorm(100))
  })
}

shinyApp(ui, server)

初始运行效果：

• 第一个标签页（Tab 1）运行正常，plot1可正常渲染：
  
• 第二个标签页（Tab 2）运行异常，plot2未渲染：
  

Shiny默认会对处于display: none隐藏状态的输出组件暂停渲染绑定，且原生实现的标签切换逻辑没有触发Shiny内置的面板显隐事件，Shiny无法感知标签切换动作、不知道当前可见的面板是哪个，因此不会初始化渲染隐藏标签内的响应式内容。
初始代码仅通过手动增删CSS类控制元素显隐，没有和Shiny的响应式渲染机制做对接，是问题出现的核心原因。

在标签切换、控制元素显隐的逻辑中，主动触发Shiny识别的shown/hidden事件，通知Shiny对应面板的显隐状态，Shiny收到事件后会自动完成可见面板内所有输出组件的渲染绑定：

• 面板从隐藏切换为显示时，触发shown事件
• 面板从显示切换为隐藏时，触发hidden事件
• 初始化逻辑放在Shiny加载完成后执行，避免DOM未就绪导致的选择器失效问题

仅需修改原有JS逻辑部分，CSS和Server端代码无需调整：

js <- shiny::HTML('
<script>
// 等Shiny连接完成、DOM加载就绪后再初始化标签逻辑
$(document).on("shiny:connected", function() {
  const tabs = document.querySelectorAll(".tab");
  const contents = document.querySelectorAll(".tab-content");

  // 初始化激活第一个标签，主动触发shown事件通知Shiny渲染内容
  contents[0].classList.add("show-content");
  tabs[0].classList.add("active-nav");
  $(contents[0]).trigger("shown");

  tabs.forEach(tab => tab.addEventListener("click", function() {
    // 清除所有标签激活状态，对被隐藏的面板触发hidden事件
    tabs.forEach(t => t.classList.remove("active-nav"));
    contents.forEach(c => {
      if (c.classList.contains("show-content")) {
        c.classList.remove("show-content");
        $(c).trigger("hidden");
      }
    });
    
    // 激活当前选中标签，对显示的面板触发shown事件通知Shiny渲染
    const targetContent = document.getElementById(tab.id + "-content");
    tab.classList.add("active-nav");
    targetContent.classList.add("show-content");
    $(targetContent).trigger("shown");
  }));
});
</script>
')
css <- shiny::HTML(
'
<style>
ul {
  margin: 0;
  padding: 0;
}

.tab {
  display: inline-block;
  border: 1px solid lightgrey;
  padding: 10px;
  cursor: pointer;
}

.active-nav {
  background: lightgrey;
}

.tab-content {
  display: none;
  padding: 10px;
}

.show-content {
  display: block;
  background: lightgray;
}
</style>
'
)

ui <- div(
  tags$ul(
    tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"),
    tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP")
  ),
  
  div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP",
      p("1 first tab"),
      plotOutput("plot1")
      ),
  
  div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP",
      p("2 second tab"),
      plotOutput("plot2")),
  
  css,
  js
)



server <- function(input, output, session) {
  output$plot1 <- renderPlot({
    plot(1:10, rnorm(10))
  })
  output$plot2 <- renderPlot({
    plot(1:100, rnorm(100))
  })
}

shinyApp(ui, server)

修复后切换到第二个标签时，Shiny会收到面板显示事件，自动完成plot2的渲染，所有标签页内容均可正常展示。

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