在Web组件的attributeChangedCallback方法中,新的属性值并不会作为参数直接传递给该方法,而是通过getAttribute方法来获取。以下是一个示例解决方法:
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['my-attribute'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'my-attribute') {
const newVal = this.getAttribute(name);
// 在这里你可以使用newVal作为新的属性值
console.log(newVal);
}
}
}
customElements.define('my-component', MyComponent);
在上面的示例代码中,我们定义了一个名为my-attribute
的观察属性,并在attributeChangedCallback方法中处理了该属性的变化。在attributeChangedCallback方法中,我们首先检查传递给该方法的属性名称是否为my-attribute
,如果是,则使用getAttribute方法获取新的属性值newVal。然后,你可以在这个方法中使用newVal作为新的属性值进行任何需要的操作。
注意:在Web组件中,attributeChangedCallback方法只会在已经定义为观察属性的属性变化时被调用。