mount-observer 0.0.9 → 0.0.11

package/MountObserver.js

@@ -62,7 +62,7 @@ export class MountObserver extends EventTarget {
         if (!(templ instanceof HTMLTemplateElement))
             throw 404;
         const clone = templ.content.cloneNode(true);
-        const slots = el.querySelectorAll(`[slot]`);
+        const slots = el.content.querySelectorAll(`[slot]`);
         for (const slot of slots) {
             const name = slot.getAttribute('slot');
             const targets = Array.from(clone.querySelectorAll(`slot[name="${name}"]`));
@@ -111,8 +111,9 @@ export class MountObserver extends EventTarget {
             el.dispatchEvent(new LoadEvent(clone));
             //console.log('dispatched')
         }
-        el.before(clone);
-        el.remove();
+        el.after(clone);
+        if (level !== 0 || slots.length === 0)
+            el.remove();
     }
     #templLookUp = new Map();
     #findByID(id, fragment) {
@@ -373,7 +374,7 @@ export class MountObserver extends EventTarget {
     }
 }
 const refCountErr = 'mount-observer ref count mismatch';
-const biQry = 'b-i[href^="#"]:not([disabled])';
+const biQry = 'template[href^="#"]:not([hidden])';
 // https://github.com/webcomponents-cg/community-protocols/issues/12#issuecomment-872415080
 /**
  * The `mutation-event` event represents something that happened.

package/README.md

@@ -11,7 +11,7 @@ Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2024-2-17
+Last Update: 2024-2-18
 
 ## Benefits of this API
 
@@ -443,25 +443,29 @@ So what this does is only check for the presence of an element with tag name "my
 
 This proposal "sneaks in" one more feature, that perhaps should stand separately as its own proposal.  Because the MountObserver api allows us to attach behaviors on the fly based on css matching, and because the MountObserver would provide developers the "first point of contact" for such functionality, the efficiency argument seemingly "screams out" for this feature.
 
-The mount-observer is always on the lookout for a special tag that takes the form:
+The mount-observer is always on the lookout for a template tags with an href attribute starting with #:
+
+```html
+<template href=#id-of-source-template></template>
+```
+
+For example:
 
 ```html
 <div>Some prior stuff</div>
-<b-i href=#my-snippet-of-html>
+<template href=#id-of-source-template>
    <div slot=slot1>hello</div>
    <div slot=slot2>goodbye<div>
-</b-i>
+</template>
 <div>Some additional stuff</div>
 ```
 
-"b-i" stands for "birtual inclusion" where birtual is a made up word that is a portmanteau of birth and virtual.
-
-When it encounters such a thing, it searches "upwardly" through the chain of ShadowRoots for a template with id=my-kinda-sorta-custom-element (in this case), and caches them as it finds them. 
+When it encounters such a thing, it searches "upwardly" through the chain of ShadowRoots for a template with id=id-of-source-template (in this case), and caches them as it finds them. 
 
-Let's say the template looks as follows:
+Let's say the source template looks as follows:
 
 ```html
-<template id=my-snippet-of-html>
+<template id=id-of-source-template>
    This is an example of a snippet of HTML that appears repeatedly.
    <slot name=slot1></slot>
    <slot name=slot2></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",