如何告诉 CSS 我的 Web 组件属性已发生变化

Question

如果你看我的简单例子这里你会看到test_button.html有一些内联CSS：-

#myBtn[clicked="true"] {
    opacity: 0.5;
}

只要我通过组件的“单击”属性设置器，这似乎就可以工作。这就是 AttributeChanged 事件被调用并且 CSS 做出反应。

但是当我的 clicked 事件发生在 Shadow DOM 上时，我无法看到（使用闭包将自定义元素的“this”发送到事件处理程序）访问“clicked”的访问器。

我的 Web 组件的用户/调用者可以在 #myBtn 上粘贴数据单击的属性，并在自己的事件处理程序中自行维护它，但属性更改不应该是可以从影子 DOM 冒泡到光的东西DOM？

Answer 1

抱歉，shoolboy错误:-(刚刚意识到如果我将事件侦听器放在“this”而不是“this.#button”上，那么我可以简单地使用 this.clicked="true"