使用Web Components实现自定义select下拉 无需slot托管my-option子元素

你的需求完全可以通过标准Web Components特性实现，没有遗漏相关能力，核心实现逻辑如下：

实现思路 #

你想要的<my-option>作为纯配置数据源、不参与实际渲染的逻辑是完全可行的，不需要用到slot插槽特性。核心逻辑是：把light DOM下的<my-option>作为配置元数据读取，组件内部自行维护shadow DOM内的<ul>渲染结果，同时监听子元素变化实现动态同步。

完整实现代码 #

// 先定义纯配置用的my-option元素，默认隐藏不占用页面空间
customElements.define('my-option', class extends HTMLElement {
  static get observedAttributes() {
    // 可自定义需要监听的属性，和原生option逻辑对齐
    return ['value', 'disabled']
  }
  connectedCallback() {
    this.style.display = 'none'
  }
})

// 定义my-select组件
customElements.define('my-select', class extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    // 初始化shadow DOM基础结构
    this.shadowRoot.innerHTML = `
      <style>
        ul { list-style: none; padding: 0; border: 1px solid #ccc; width: 200px; }
        li { padding: 8px; cursor: pointer; }
        li:hover { background: #f5f5f5; }
      </style>
      <ul class="select-container"></ul>
    `
    this.container = this.shadowRoot.querySelector('.select-container')
    // 初始化监听器，用于同步动态变化的my-option
    this.observer = new MutationObserver(() => this.renderOptions())
  }

  connectedCallback() {
    // 组件挂载时初始渲染
    this.renderOptions()
    // 启动监听：子元素增删、指定属性变化时触发重渲染
    this.observer.observe(this, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['value', 'disabled']
    })
  }

  disconnectedCallback() {
    // 组件卸载时停止监听避免内存泄漏
    this.observer.disconnect()
  }

  renderOptions() {
    // 清空原有渲染结果
    this.container.innerHTML = ''
    // 读取所有子my-option的内容和属性生成li节点
    const options = Array.from(this.querySelectorAll('my-option'))
    options.forEach(opt => {
      const li = document.createElement('li')
      li.textContent = opt.textContent.trim()
      // 同步自定义属性
      if (opt.hasAttribute('value')) {
        li.dataset.value = opt.getAttribute('value')
      }
      if (opt.hasAttribute('disabled')) {
        li.style.opacity = '0.5'
        li.style.pointerEvents = 'none'
      }
      // 可扩展选中、高亮等原生select的交互逻辑
      li.addEventListener('click', () => {
        console.log('选中值：', li.dataset.value || li.textContent)
      })
      this.container.appendChild(li)
    })
  }
})

关键说明 #

• 为什么不需要slot：插槽的设计目标是投射用户提供的可交互可渲染内容，而你的场景中<my-option>是纯配置节点，直接读取light DOM的子节点即可，这是完全符合Web Components设计规范的用法。
• <my-option>设置display: none是为了避免它在light DOM中被渲染出来，对用户完全不可见，只作为配置数据源存在。
• MutationObserver的作用是适配动态场景：如果后续用户通过JS动态增删<my-option>、修改它的属性，组件会自动同步更新shadow DOM中的渲染结果，和原生<select>的行为保持一致。

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