Created attachment 467614 [details] Simple test case When styling an element using a :has(+ sibling) or :has(~ sibling) selector, adding/removing siblings of the element doesn't invalidate the styles. I originally found and reported this issue in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1851356.
I think we'd either need to extend the "invalidate a lot" patch I have in https://bugs.webkit.org/show_bug.cgi?id=253944 to handle such selectors, or (and this is probably better) we need to store :has(+) and :has(~) rules separately on RuleFeature / StyleScopeRuleSet, then look at the style relation bits that we set on elements to determine whether we need to invalidate those rules on some or all of the siblings of the inserted or removed element.
<rdar://problem/115242090>
Also running into this problem. Here is an example https://o4zyd0.csb.app ... The app has the styles #form-fields:not(:has(li)) ul, #form-fields:not(:has(li)) button { display: none; } but when the form field is added to the fieldset, the query does not match (however subsequent updates to the dom are fast and work).
It would good to write a web-platform-test for this if you have time: https://github.com/web-platform-tests/wpt That would help us fix it.