Stencil.js - 监听宿主元素上的 class 属性变化

Question

如何监听宿主元素上 class 属性的变化？

Answer 1

跟踪 DOM 属性更改需要使用 MutationObserver。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

componentDidLoad() {
    // Target element that will be observed
    const target = this.el;

    const config = {
        attributes: true,
        attributeOldValue: true,
        attributeFilter: ['class']
    };

    function subscriberCallback(mutations) {
        mutations.forEach((mutation) => {
            console.log(mutation);
        });
    }

    const observer = new MutationObserver(subscriberCallback);
    observer.observe(target, config);
}

Answer 2

有一种简单的方法可以做到这一点，但这可能并不适用于所有情况。

只需将 'class' 添加为 @Prop 和 @Watch:

@Prop() class: string;
@Watch('class') handleClassChange(class: string) {
    console.log(class);
}

Stencil.js - 监听宿主元素上的 class 属性变化

Stencil.js - Listen to class attribute changes on host element

web-component

stenciljs

stencil-component