fix onElementConnected

src/Avatar/Avatar.stories.ts

@@ -13,7 +13,7 @@ const meta: Meta = {
             </button>
             <div popover bt id="avatar-popover">
               <ul bt-dropdown-menu>
-                <li separated>
+                <li bt-separated>
                   <p>John Doe</p>
                   <p>[email protected]</p>
                 </li>

src/DropdownMenu/DropdownMenu.css

@@ -27,7 +27,7 @@ ul[bt-dropdown-menu] {
       --padding-bottom: 0.75rem;
     }
 
-    &[separated] {
+    &[bt-separated] {
       position: relative;
       margin-bottom: var(--separator-gap);
 
@@ -43,7 +43,7 @@ ul[bt-dropdown-menu] {
       }
     }
 
-    [separated] + & {
+    [bt-separated] + & {
       margin-top: var(--separator-gap);
     }
   }

src/DropdownMenu/DropdownMenu.stories.ts

@@ -9,13 +9,13 @@ const meta: Meta = {
       </button>
       <div popover bt id="dropdown-menu-popover">
         <ul bt-dropdown-menu>
-          <li separated>
+          <li bt-separated>
             <p>John Doe</p>
             <p>[email protected]</p>
           </li>
           <li><a href="#">Menu item 1</a></li>
           <li><a href="#">Menu item 2</a></li>
-          <li separated><a href="#">Menu item 3</a></li>
+          <li bt-separated><a href="#">Menu item 3</a></li>
           <li><button type="button">Sign out</button></li>
         </ul>
       </div>`;

src/Table/RowSelector.ts

@@ -1,4 +1,9 @@
-import { injectStyles } from '../utils';
+import { injectStyles, onElementConnected } from '../utils';
 import styles from './RowSelector.css?raw&inline';
+import svg from './RowSelector.svg?raw&inline';
 
 injectStyles(styles);
+
+onElementConnected('td[bt-row-selector]', (element) => {
+  element.insertAdjacentHTML('beforeend', svg);
+});

src/Table/Table.ts

@@ -1,11 +1,4 @@
-import { injectStyles, onElementConnected } from '../utils';
+import { injectStyles } from '../utils';
 import styles from './Table.css?raw&inline';
-import svg from './RowSelector.svg?raw&inline';
 
 injectStyles(styles);
-
-onElementConnected('table[bt]', (element) => {
-  element.querySelectorAll('td[bt-row-selector]').forEach((node) => {
-    node.insertAdjacentHTML('beforeend', svg);
-  });
-});

src/utils.ts

@@ -7,21 +7,47 @@ export function injectStyles(styles: string) {
 const listeners: Record<string, (element: HTMLElement) => void> = {};
 
 const observer = new MutationObserver((mutations) => {
-  mutations.forEach((mutation) => {
-    if (mutation.type === 'childList') {
-      mutation.addedNodes.forEach((node) => {
-        if (node instanceof HTMLElement) {
-          Object.entries(listeners).forEach(([selector, callback]) => {
-            if (node.matches(selector)) {
-              callback(node);
-            }
-          });
-        }
-      });
+  const connected = new Set<HTMLElement>();
+  const selector = Object.keys(listeners).join(',');
+
+  for (const { addedNodes, removedNodes } of mutations) {
+    for (const node of addedNodes) {
+      if (!(node instanceof HTMLElement)) continue;
+
+      if (node.matches(selector)) {
+        connected.add(node);
+      }
+
+      for (const child of node.querySelectorAll(selector)) {
+        if (!(child instanceof HTMLElement)) continue;
+
+        connected.add(child);
+      }
     }
-  });
+    for (const node of removedNodes) {
+      if (!(node instanceof HTMLElement)) continue;
+
+      if (node.matches(selector)) {
+        connected.delete(node);
+      }
+
+      for (const child of node.querySelectorAll(selector)) {
+        if (!(child instanceof HTMLElement)) continue;
+
+        connected.delete(child);
+      }
+    }
+  }
+
+  for (const node of connected) {
+    Object.entries(listeners).forEach(([selector, callback]) => {
+      if (node.matches(selector)) {
+        callback(node);
+      }
+    });
+  }
 });
-observer.observe(document.body, {
+observer.observe(document, {
   childList: true,
   subtree: true,
 });

tsconfig.json

@@ -9,7 +9,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "lib": ["esnext", "dom"]
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]