javascript - 将标题设置为 Web 组件上的属性会触发最大调用堆栈

Question

我正在开发一个导航链接 Web 组件。我要在组件上设置的属性之一是标题。这似乎以某种方式触发了最大调用堆栈错误。我应该完全避免 title 吗？我可以使用 caption 来代替。

第一个错误

类“NavLinkCmp”错误地扩展了基类“HTMLElement”。
属性“title”在“NavLinkCmp”类型中是私有(private)的，但在“HTMLElement”类型中不是私有(private)的。

第二个错误

nav-link.cmp.ts:72 Uncaught RangeError: Maximum call stack size exceeded.
    at HTMLElement.attributeChangedCallback (nav-link.cmp.ts:72)

navigator-cmp.ts

<nav-link-cmp href="${link.url}" fa-icon="${link.icon}" 
    title="${link.title}" description="${link.description}">
</nav-link-cmp>

nav-link-cmp.ts

export class NavLinkCmp extends HTMLElement {

    // State
    private title: string;

    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.innerHTML = `
        <div class="info">
            <div class="title">${this.title}</div>
        </div>
        `;
    }

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

    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
        this.title = newValue
    }

}

// Component
require('./nav-link.cmp.scss');
window.customElements.define('nav-link-cmp', NavLinkCmp);

Answer 1

试试这个:

attributeChangedCallback(name: string, oldValue: string, newValue: string) {
  if (oldValue !== newValue) {
    this.title = newValue;
  }
}

如果oldValue和newValue相同，则无需再次设置该属性。

如果您这样做，它就会更改属性，然后再次调用 attributeChangedCallback 并永远循环。