Web Components中attributeChangedCallback未触发问题求助

核心问题分析 #

你的代码里有两个关键问题导致attributeChangedCallback不触发：

1. btnDisabled 属性的 getter/setter 未关联到声明的观察属性 #

你在observedAttributes里声明了btnDisabled，但：

• getter 读取的是**btnState**属性，而非btnDisabled
• setter 修改的也是**btnState**属性，不是btnDisabled
  这就导致btnDisabled属性从未被修改过，自然不会触发回调。

2. HTML 属性命名规范不匹配 #

Web Component 的属性在 HTML 中必须使用短横线命名（kebab-case），比如btn-text而不是btnText。DOM 会自动将 HTML 中的属性名转为小写，驼峰式的btnText实际会被解析为btntext，和你observedAttributes里的btnText不匹配，导致观察失效。

修复后的完整代码 #

// import sheet from './button.css' assert { type: 'css' };

/* eslint-disable @typescript-eslint/no-non-null-assertion */
export class ButtonElement extends HTMLElement {
  // 改用短横线命名的属性，符合HTML规范
  static get observedAttributes() {
    return ['btn-text', 'btn-disabled'];
  }

  // btnText 对应 HTML 中的 btn-text 属性
  get btnText() {
    return this.getAttribute('btn-text')?.trim() || 'Next';
  }

  set btnText(value: string) {
    console.log('Setting button text value...', value);
    this.setAttribute('btn-text', value);
    this.render();
  }

  // btnDisabled 对应 HTML 中的 btn-disabled 属性
  get btnDisabled() {
    return this.hasAttribute('btn-disabled');
  }

  set btnDisabled(value: boolean) {
    console.log('Setting button state value...', value);
    if (value) {
      this.setAttribute('btn-disabled', '');
    } else {
      this.removeAttribute('btn-disabled');
    }
    this.render();
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    console.log('Element added to the DOM');
    this.setAllAttributes();
    this.render();
  }

  disconnectedCallback() {
    console.log('Element removed from the DOM');
  }

  attributeChangedCallback(
    attributeName: string,
    oldValue: string | null,
    newValue: string | null
  ) {
    console.log(
      `Attribute ${attributeName} changed from ${oldValue} to ${newValue}`
    );
    // 属性变化时重新渲染
    this.render();
  }

  render() {
    if (!this.shadowRoot) return;

    console.log('My button text is ', this.btnText);

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        /* 改用 btn-disabled 属性做样式判断 */
        :host([btn-disabled]) button {
          background-color: var(--button-disabled-color);
          border-color: var(--button-disabled-border-color);
          color: var(--color-disabled);
          cursor: not-allowed;
          pointer-events: none;
        }

        button {
          display: flex;
          justify-content: center;
          align-items: center;
          outline: none;
          background-color: var(--button-primary-color);
          border: 1px solid transparent;
          border-color: var(--button-primary-border-color);
          color: var(--color-primary);
          user-select: none;
          font-size: 1.1rem;
          padding: 0.375rem 0.75rem;
          border-radius: var(--button-border-radius, var(--button-default-border-radius));
          cursor: pointer;
          height: 50px;
          width: 100%;
        }
      </style>
      <button>
        <slot name="left-icon"></slot>
        <slot>${this.btnText}</slot>
        <slot name="right-icon"></slot>
      </button>
    `;

    this.addEventListeners();
  }

  private setAllAttributes() {
    const textAttr = this.getAttribute('btn-text');
    if (textAttr) {
      this.btnText = textAttr;
    }
  }

  private addEventListeners() {
    console.log('Adding event listeners...');
    const btn = this.shadowRoot?.querySelector('button');
    console.log('$$$$ ', btn);

    // 先移除旧监听，避免重复绑定
    btn?.removeEventListener('click', this.handleClick.bind(this));
    btn?.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick() {
    console.log('Button is clicked inside the custom element...');

    const eventData = { theme: document.documentElement.getAttribute('theme') };
    const event = new CustomEvent('buttonClicked', {
      detail: eventData,
      bubbles: true,
    });
    this.dispatchEvent(event);
  }
}

customElements.define('ag-button', ButtonElement);

关键修改点说明 #

1. 统一属性命名：

   • observedAttributes改用短横线命名btn-text、btn-disabled，符合HTML属性规范
   • getter/setter 对应修改为关联这些短横线属性

2. 修复btnDisabled的属性关联：

   • getter 使用hasAttribute('btn-disabled')判断，更符合布尔属性的HTML规范（存在即true）
   • setter 直接修改btn-disabled属性，而非之前的btnState，确保触发观察回调

3. 样式选择器调整：

   • 把:host-context([btnState='true'])改为:host([btn-disabled])，直接绑定自定义元素的属性，更简洁准确

4. 优化事件绑定：

   • 添加removeEventListener避免重复绑定（因为render会多次执行）

5. 修正attributeChangedCallback参数类型：

   • oldValue和newValue可能为null（比如属性被移除时），调整类型声明避免报错

使用示例 #

在HTML中使用时，直接用短横线属性：

<ag-button btn-text="Submit" btn-disabled></ag-button>

当你修改这些属性（无论是通过JS的setter还是直接修改DOM属性），attributeChangedCallback都会正常触发。

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