Fix bug in BodyObserver removing wrong elements on detach due to a …

…wrong CSS attribute selector

CHANGELOG.md

@@ -9,9 +9,9 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Fixed
 
-- Fix bug in `BodyObserver` removing wrong elements on detach due to a wrong CSS attribute selector
+- Fix bug in `BodyObserver` removing wrong elements on detach due to a wrong CSS attribute selector. See also https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
   - Wrong selector: `<attribute>*=<id>`
-  - Correct selector: `<attribute>=<id>`
+  - Correct selector: `<attribute>~=<id>`
 
 ## [1.6.8] - 2024-08-21
 

core/src/main/java/org/jboss/elemento/BodyObserver.java

@@ -178,7 +178,15 @@ private static void onElementsRemoved(MutationRecord record) {
 
     private static boolean isChildOfObservedElement(List<HTMLElement> elements, String attribute, String id) {
         for (HTMLElement element : elements) {
-            if (element.querySelector("[" + attribute + "='" + id + "']") != null) {
+            // The use of the right attribute selector is important here!
+            // Multiple attach/detach IDs can be present on an element.
+
+            // The selector "~=" matches elements whose value is exactly the value
+            // or contains the value in its (space-separated) list of values.
+
+            // The selector "*=" must not be used!
+            // It matches elements whose value contains the value anywhere within the string.
+            if (element.querySelector("[" + attribute + "~='" + id + "']") != null) {
                 return true;
             }
         }