How to tell CSS my Web Component attribute has mutated

Issue

If you look at me simple example here you with see that test_button.html has some inline CSS: -

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

This seems to work as long as I go through the componet's attribute setter for "clicked". That is the AttributeChanged event is called and CSS reacts.

But as my clicked event occurs on the Shadow DOM there is no way I can see (bar using a closure to send the custom element's "this" to the event handler) of accessing the accessor for "clicked".

The user/caller of my Web Component could stick a data-clicked attribute on #myBtn and maintain it themselves in their own event handler but shouldn't attribute-change be something that can bubble up from the shadow DOM to the light DOM?

Solution

Sorry, shoolboy error :-( Just realized if I stick the event listener on "this" rather than "this.#button" then the event Handler can simply this.target.clicked="true" and CSS is informed.

But will I still have access to the Shadow DOM from abc-menu-button?

I've update the code. Basically I added an event to the loght DOM element: -

this.addEventListener("click", (e) => {
        e.target.clicked = e.target.clicked == "true" ? "false" : "true";
    });

Now the caller CSS is happy.

FYI I found this very informative link in my searches regarding Shadow DOM event propagation..

Answered By - McMurphy