如何让自定义fancy-label通过ElementInternals关联fancy-input并纳入labels列表？

要实现fancy-label的Shadow DOM里的原生label能被fancy-input的ElementInternals.labels识别，核心是让fancy-label本身被表单的标签关联机制认可，同时内部的样式化label能正常绑定输入元素。以下是可行方案：

方案1：继承原生<label>元素（推荐） #

自定义内置元素可以继承原生HTML元素的行为，让fancy-label本质上就是一个<label>，这样它会自动被ElementInternals.labels纳入列表，同时Shadow DOM可用于封装样式。

实现代码 #

// 定义fancy-label，继承HTMLLabelElement
class FancyLabel extends HTMLLabelElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });

    // 创建Shadow DOM内的样式化label
    const styledLabel = document.createElement('label');
    // 同步外部for属性到内部label
    styledLabel.htmlFor = this.htmlFor;

    // 自定义样式
    const style = document.createElement('style');
    style.textContent = `
      label {
        color: #2563eb;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
      }
      label:hover {
        background-color: #eff6ff;
      }
    `;

    // 插槽用于传递外部文本内容
    const slot = document.createElement('slot');
    styledLabel.appendChild(slot);

    shadowRoot.append(style, styledLabel);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'for') {
      this.shadowRoot.querySelector('label').htmlFor = newValue;
    }
  }

  static get observedAttributes() {
    return ['for'];
  }
}

// 注册自定义内置元素，指定继承label
customElements.define('fancy-label', FancyLabel, { extends: 'label' });

使用方式 #

<fancy-input id="username"></fancy-input>
<!-- 使用is属性指定为自定义label -->
<label is="fancy-label" for="username">用户名：</label>

效果说明 #

• fancy-input的ElementInternals.labels会返回这个fancy-label实例，因为它本质是原生<label>元素。
• Shadow DOM内的样式化label会响应点击，自动聚焦关联的fancy-input。
• 外部传递的文本内容通过插槽渲染到样式化label中，同时保留原生label的所有行为。

方案2：纯自定义元素（不继承原生label） #

如果不想依赖自定义内置元素，可通过手动模拟标签行为，但无法让fancy-label实例直接出现在ElementInternals.labels中（因为该列表仅识别原生<label>）。不过可以让Shadow DOM内的label被识别，但列表中会是内部的原生label而非fancy-label实例，具体做法：

• 在fancy-label的Shadow DOM中创建原生label，设置其for属性指向fancy-input的id。
• 将fancy-label的文本内容传递给内部label。

这种方案无法满足你"让fancy-label节点出现在NodeList中"的核心需求，因此仅作为备选。

关键注意点 #

• 自定义输入元素fancy-input必须正确使用ElementInternals，确保它是表单关联元素（通过attachInternals()获取实例，并设置formAssociated: true）。
• 继承原生元素的自定义内置元素兼容性良好，现代浏览器均支持。

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