Great article. I am super excited for :has, I think it will open up a lot of doors to truly declaritive UI with vanilla CSS and HTML. One more handy feature is

Great article. I am super excited for :has, I think it will open up a lot of doors to truly declaritive UI with vanilla CSS and HTML. One more handy feature is data attributes. You can use them to introduce some state to your UI. Here's a quick and dirty example of a menu for an RPG game. <ul id="menu" data-can=""> <li id="menu-attack"><button>attack</button></li> <li id="menu-magic"><button>magic</button></li> <li id="menu-run"><button>run</button></li> </ul> We can use data attribute selectors to hide menu buttons that the player can't use. #menu:not([data-can~=attack]) #menu-attack, #menu:not([data-can~=magic]) #menu-magic, #menu:not([data-can~=run]) #menu-run { display: none; } Then all we need to update the menu UI is this single line of JS. document.getElementById("menu").dataset.can = getPossibleActions().join(" "); You can see a rough example here: https://github.com/kawaiisolutions/tactics https://github.com/kawaiisolutions/tactics. It's very nice for prototyping.