如何为自定义HTML元素添加val属性，无需getAttribute获取tableVal值？

要实现无需调用getAttribute()就能直接通过.val获取tableVal属性值，正确的做法是通过自定义元素类定义属性访问器，而非修改全局原型。以下是两种可行方案：

方案一：定义Getter访问器 #

通过创建自定义元素类，添加get val()方法直接返回属性值，同时可按需添加Setter实现属性修改：

// 定义自定义元素类
class CustomTable extends HTMLElement {
  // 定义val的getter
  get val() {
    return this.getAttribute('tableVal');
  }

  // 可选：定义val的setter，支持直接赋值修改属性
  set val(newValue) {
    this.setAttribute('tableVal', newValue);
  }
}

// 注册自定义元素
customElements.define('custom-table', CustomTable);

使用示例：

const customElement = document.querySelector('custom-table');
console.log(customElement.val); // 输出10

// 若添加了setter，还可直接修改属性
customElement.val = 20;
console.log(customElement.getAttribute('tableVal')); // 输出20

方案二：监听属性变化（可选） #

如果需要在tableVal属性变化时执行额外逻辑（比如更新UI），可以结合observedAttributes和attributeChangedCallback：

class CustomTable extends HTMLElement {
  // 指定需要监听的属性
  static get observedAttributes() {
    return ['tableVal'];
  }

  get val() {
    return this.getAttribute('tableVal');
  }

  set val(newValue) {
    this.setAttribute('tableVal', newValue);
  }

  // 属性变化时触发的回调
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === 'tableVal') {
      // 这里可以添加属性变化后的处理逻辑
      console.log('tableVal已更新为:', newValue);
    }
  }
}

customElements.define('custom-table', CustomTable);

原代码问题说明 #

你之前的代码存在两处关键错误：

1. customElements.prototype并非自定义元素的原型，自定义元素的基类原型是HTMLElement.prototype，直接修改customElements的原型没有意义。
2. 直接修改全局原型的做法不推荐，会污染所有自定义元素的原型链，正确方式是创建独立的自定义元素类继承HTMLElement。

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