如何在Vanilla JS Web Components中添加内部信息处理方法？

你当前代码的核心问题是：你注册的自定义元素是plane-scheme，但实际创建的是普通<plane>元素，导致你给Plane类添加的方法无法作用到这个实例上。以下是两种常见场景的正确实现方式：

一、添加供外部调用的公共信息处理方法 #

直接在Plane类中定义原型方法，创建自定义元素实例后即可调用：

class Plane extends HTMLElement {
  constructor() {
    super();
    this.rendered = false;
  }

  connectedCallback() {
    if (!this.rendered) {
      this.render();
      this.rendered = true;
    }
  }

  render() {
    // 将模板和样式整合到组件内部，避免依赖外部变量
    this.innerHTML = `
      <style>
        .plane {
          border: 1px solid #eee;
          padding: 1rem;
          width: 200px;
        }
      </style>
      <div class="plane">初始信息</div>
    `;
  }

  // 自定义信息更新方法
  updatePlaneInfo(newInfo) {
    const planeContent = this.querySelector('.plane');
    planeContent.textContent = `更新后信息：${newInfo}`;
  }

  // 自定义信息获取方法
  getPlaneDetails() {
    return {
      isRendered: this.rendered,
      currentContent: this.querySelector('.plane').textContent
    };
  }
}

// 注册自定义元素
window.customElements.define('plane-scheme', Plane);

// 创建自定义元素实例（注意使用注册的标签名）
const plane = document.createElement('plane-scheme');
plane.className = 'plane';
document.body.append(plane);

// 调用自定义方法
plane.updatePlaneInfo('航班CA1234 即将起飞');
console.log(plane.getPlaneDetails());

二、添加组件内部的事件处理函数 #

如果需要给组件内的元素绑定事件处理逻辑，要确保this指向组件实例，避免上下文丢失：

class Plane extends HTMLElement {
  constructor() {
    super();
    this.rendered = false;
    // 在构造函数中绑定this，确保事件处理函数内的this指向组件实例
    this.handleInfoClick = this.handleInfoClick.bind(this);
  }

  connectedCallback() {
    if (!this.rendered) {
      this.render();
      this.rendered = true;
    }
    // 给组件添加事件监听
    this.addEventListener('click', this.handleInfoClick);
  }

  disconnectedCallback() {
    // 组件销毁时移除监听，防止内存泄漏
    this.removeEventListener('click', this.handleInfoClick);
  }

  render() {
    this.innerHTML = `
      <style>
        .plane { cursor: pointer; background: #f5f5f5; padding: 1rem; }
      </style>
      <div class="plane">点击查看信息</div>
    `;
  }

  // 内部信息处理函数
  handleInfoClick() {
    const currentTime = new Date().toLocaleString();
    this.updatePlaneInfo(`点击时间：${currentTime}`);
  }

  updatePlaneInfo(info) {
    this.querySelector('.plane').textContent = info;
  }
}

window.customElements.define('plane-scheme', Plane);

// 直接插入自定义元素到页面
document.body.innerHTML += '<plane-scheme class="plane"></plane-scheme>';

关键注意事项 #

• 必须使用你注册的自定义元素标签名（plane-scheme）创建实例，而不是普通的<plane>标签。
• 事件处理函数如果需要访问组件实例的属性/方法，一定要通过bind(this)、箭头函数（在构造函数中定义）或事件委托来确保this指向正确。
• 组件内部的模板和样式尽量整合到类中，减少对外部变量的依赖，提升组件的可复用性。

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