使用自定义元素与Template访问可视化DOM的按钮绑定问题

要实现按钮控制自定义面板的显示隐藏，关键是在自定义元素的构造函数中，从Shadow DOM里获取按钮和面板元素，绑定点击事件来切换面板的类名。下面是修改后的完整实现：

1. 调整模板结构（给按钮添加ID） #

给模板里的按钮加上唯一ID，方便后续准确获取元素：

<template id="custom-panel-template">
    <style type="text/css">
        #panel {
            display: none;
        }
        
        #panel.open {
            display: revert;
        }
    </style>
    
    <button id="openBtn" type="button"><slot name="openButtonText">Default Open Button Text</slot></button>
    <button id="closeBtn" type="button"><slot name="closeButtonText">Default Close Button Text</slot></button>
    
    <fieldset id="panel">
        <legend><slot name="panelName">Default Panel Name</slot></legend>
        <slot name="panelContent">Default Panel Content</slot>
    </fieldset>
</template>

2. 修改自定义元素类（绑定事件） #

在构造函数中，克隆模板后，通过Shadow DOM获取按钮和面板元素，绑定点击事件来切换open类：

customElements.define(
  'custom-panel',
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById('custom-panel-template');
      const templateContent = template.content.cloneNode(true);
      
      this.attachShadow({ mode: 'open' }).appendChild(templateContent);
      
      // 获取Shadow DOM内的元素
      const shadowRoot = this.shadowRoot;
      const openBtn = shadowRoot.getElementById('openBtn');
      const closeBtn = shadowRoot.getElementById('closeBtn');
      const panel = shadowRoot.getElementById('panel');
      
      // 绑定点击事件
      openBtn.addEventListener('click', () => {
        panel.classList.add('open');
      });
      
      closeBtn.addEventListener('click', () => {
        panel.classList.remove('open');
      });
    }
  }
);

3. 修正插槽使用（确保内容正确插入） #

第一个自定义面板的内容插槽未指定名称，需要改为panelContent才能正确匹配模板中的命名插槽：

<custom-panel>
  <span slot="openButtonText">Open Panel 1</span>
  <span slot="closeButtonText">Close Panel 1</span>
  <span slot="panelName">Panel 1</span>
  <div slot="panelContent">Panel 1 Details</div>
</custom-panel>
<custom-panel>
  <span slot="openButtonText">Open Panel 2</span>
  <span slot="closeButtonText">Close Panel 2</span>
  <span slot="panelName">Panel 2</span>
  <div slot="panelContent">Panel 2 Details</div>
</custom-panel>

关键说明 #

• 自定义元素的Shadow DOM是独立的，必须通过this.shadowRoot访问内部元素，不能直接用document.querySelector。
• 给按钮添加ID比用nth-of-type更可靠，避免后续模板结构变动导致元素获取错误。
• 命名插槽必须一一对应，未指定名称的插槽会落入默认插槽，而模板中我们用的是panelContent命名插槽，所以要修正第一个面板的插槽属性。

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