mount-observer 0.0.6 → 0.0.8

package/MountObserver.js

@@ -12,10 +12,10 @@ export class MountObserver extends EventTarget {
     #isComplex;
     constructor(init) {
         super();
-        const { match, whereElementIntersectsWith, whereMediaMatches } = init;
+        const { on, whereElementIntersectsWith, whereMediaMatches } = init;
         let isComplex = false;
-        if (match !== undefined) {
-            const reducedMatch = match.replaceAll(':not(', '');
+        if (on !== undefined) {
+            const reducedMatch = on.replaceAll(':not(', '');
             isComplex = reducedMatch.includes(' ') || reducedMatch.includes(':');
         }
         this.#isComplex = isComplex;
@@ -28,21 +28,20 @@ export class MountObserver extends EventTarget {
         //this.#unmounted = new WeakSet();
     }
     #calculatedSelector;
-    get #selector() {
+    #fullListOfAttrs;
+    //get #attrVals
+    async #selector() {
         if (this.#calculatedSelector !== undefined)
             return this.#calculatedSelector;
-        const { match, attribMatches } = this.#mountInit;
-        const base = match || '*';
-        if (attribMatches === undefined)
-            return base;
-        const matches = [];
-        attribMatches.forEach(x => {
-            const { names } = x;
-            names.forEach(y => {
-                matches.push(`${base}[${y}]`);
-            });
-        });
-        this.#calculatedSelector = matches.join(',');
+        const { on, whereAttr } = this.#mountInit;
+        const withoutAttrs = on || '*';
+        if (whereAttr === undefined)
+            return withoutAttrs;
+        const { getWhereAttrSelector } = await import('./getWhereAttrSelector.js');
+        const info = getWhereAttrSelector(whereAttr, withoutAttrs);
+        const { fullListOfAttrs, calculatedSelector } = info;
+        this.#fullListOfAttrs = fullListOfAttrs;
+        this.#calculatedSelector = calculatedSelector;
         return this.#calculatedSelector;
     }
     unobserve(within) {
@@ -86,8 +85,9 @@ export class MountObserver extends EventTarget {
             }
         }
         const rootMutObs = mutationObserverLookup.get(within);
-        const { attribMatches } = this.#mountInit;
-        rootMutObs.addEventListener('mutation-event', (e) => {
+        //const {whereAttr} = this.#mountInit;
+        const fullListOfAttrs = this.#fullListOfAttrs;
+        rootMutObs.addEventListener('mutation-event', async (e) => {
             //TODO:  disconnected
             if (this.#isComplex) {
                 this.#inspectWithin(within, false);
@@ -96,7 +96,7 @@ export class MountObserver extends EventTarget {
             const { mutationRecords } = e;
             const elsToInspect = [];
             //const elsToDisconnect: Array<Element> = [];
-            const doDisconnect = this.#mountInit.do?.onDisconnect;
+            const doDisconnect = this.#mountInit.do?.disconnect;
             for (const mutationRecord of mutationRecords) {
                 const { addedNodes, type, removedNodes } = mutationRecord;
                 //console.log(mutationRecord);
@@ -104,22 +104,11 @@ export class MountObserver extends EventTarget {
                 addedElements.forEach(x => elsToInspect.push(x));
                 if (type === 'attributes') {
                     const { target, attributeName, oldValue } = mutationRecord;
-                    if (target instanceof Element && attributeName !== null && attribMatches !== undefined && this.#mounted.has(target)) {
-                        let idx = 0;
-                        for (const attrMatch of attribMatches) {
-                            const { names } = attrMatch;
-                            if (names.includes(attributeName)) {
+                    if (target instanceof Element && attributeName !== null && this.#mounted.has(target)) {
+                        if (fullListOfAttrs !== undefined) {
+                            const idx = fullListOfAttrs.indexOf(attributeName);
+                            if (idx > -1) {
                                 const newValue = target.getAttribute(attributeName);
-                                // let parsedNewValue = undefined;
-                                // switch(type){
-                                //     case 'boolean':
-                                //         parsedNewValue = newValue === 'true' ? true : newValue === 'false' ? false : null;
-                                //         break;
-                                //     case 'date':
-                                //         parsedNewValue = newValue === null ? null : new Date(newValue);
-                                //         break;
-                                //     case ''
-                                // }
                                 const attrChangeInfo = {
                                     name: attributeName,
                                     oldValue,
@@ -128,7 +117,13 @@ export class MountObserver extends EventTarget {
                                 };
                                 this.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
                             }
-                            idx++;
+                        }
+                        else {
+                            const { whereAttr } = this.#mountInit;
+                            if (whereAttr !== undefined) {
+                                const { doWhereAttr } = await import('./doWhereAttr.js');
+                                doWhereAttr(whereAttr, attributeName, target, oldValue, this);
+                            }
                         }
                     }
                     elsToInspect.push(target);
@@ -140,7 +135,7 @@ export class MountObserver extends EventTarget {
                     // this.#mountedList = this.#mountedList?.filter(x => x.deref() !== deletedElement);
                     this.#disconnected.add(deletedElement);
                     if (doDisconnect !== undefined) {
-                        doDisconnect(deletedElement, this);
+                        doDisconnect(deletedElement, this, {});
                     }
                     this.dispatchEvent(new DisconnectEvent(deletedElement));
                 }
@@ -160,9 +155,10 @@ export class MountObserver extends EventTarget {
     }
     async #mount(matching, initializing) {
         //first unmount non matching
-        const alreadyMounted = this.#filterAndDismount();
-        const onMount = this.#mountInit.do?.onMount;
-        const { import: imp, attribMatches } = this.#mountInit;
+        const alreadyMounted = await this.#filterAndDismount();
+        const mount = this.#mountInit.do?.mount;
+        const { import: imp } = this.#mountInit;
+        const fullListOfAttrs = this.#fullListOfAttrs;
         for (const match of matching) {
             if (alreadyMounted.has(match))
                 continue;
@@ -186,41 +182,47 @@ export class MountObserver extends EventTarget {
                         break;
                 }
             }
-            if (onMount !== undefined) {
-                onMount(match, this, {
+            if (mount !== undefined) {
+                mount(match, this, {
                     stage: 'PostImport',
                     initializing
                 });
             }
             this.dispatchEvent(new MountEvent(match, initializing));
-            if (attribMatches !== undefined) {
-                let idx = 0;
-                for (const attribMatch of attribMatches) {
-                    let newValue = null;
-                    const { names } = attribMatch;
-                    let nonNullName = names[0];
-                    for (const name of names) {
-                        const attrVal = match.getAttribute(name);
-                        if (attrVal !== null)
-                            nonNullName = name;
-                        newValue = newValue || attrVal;
+            if (fullListOfAttrs !== undefined) {
+                const { whereAttr } = this.#mountInit;
+                for (const name of fullListOfAttrs) {
+                    if (whereAttr !== undefined) {
+                        const { doWhereAttr } = await import('./doWhereAttr.js');
+                        doWhereAttr(whereAttr, name, match, null, this);
                     }
-                    const attribInfo = {
-                        oldValue: null,
-                        newValue,
-                        idx,
-                        name: nonNullName
-                    };
-                    this.dispatchEvent(new AttrChangeEvent(match, attribInfo));
-                    idx++;
                 }
+                // let idx = 0;
+                // for(const attribMatch of attribMatches){
+                //     let newValue = null;
+                //     const {names} = attribMatch;
+                //     let nonNullName = names[0];
+                //     for(const name of names){
+                //         const attrVal = match.getAttribute(name);
+                //         if(attrVal !== null) nonNullName = name;
+                //         newValue = newValue || attrVal;
+                //     }
+                //     const attribInfo: AttrChangeInfo = {
+                //         oldValue: null,
+                //         newValue,
+                //         idx,
+                //         name: nonNullName
+                //     };
+                //     this.dispatchEvent(new AttrChangeEvent(match, attribInfo));
+                //     idx++;
+                // }
             }
             this.#mountedList?.push(new WeakRef(match));
             //if(this.#unmounted.has(match)) this.#unmounted.delete(match);
         }
     }
     async #dismount(unmatching) {
-        const onDismount = this.#mountInit.do?.onDismount;
+        const onDismount = this.#mountInit.do?.dismount;
         for (const unmatch of unmatching) {
             if (onDismount !== undefined) {
                 onDismount(unmatch, this, {});
@@ -228,12 +230,12 @@ export class MountObserver extends EventTarget {
             this.dispatchEvent(new DismountEvent(unmatch));
         }
     }
-    #filterAndDismount() {
+    async #filterAndDismount() {
         const returnSet = new Set();
         if (this.#mountedList !== undefined) {
             const previouslyMounted = this.#mountedList.map(x => x.deref());
             const { whereSatisfies, whereInstanceOf } = this.#mountInit;
-            const match = this.#selector;
+            const match = await this.#selector();
             const elsToUnMount = previouslyMounted.filter(x => {
                 if (x === undefined)
                     return false;
@@ -253,7 +255,7 @@ export class MountObserver extends EventTarget {
     }
     async #filterAndMount(els, checkMatch, initializing) {
         const { whereSatisfies, whereInstanceOf } = this.#mountInit;
-        const match = this.#selector;
+        const match = await this.#selector();
         const elsToMount = els.filter(x => {
             if (checkMatch) {
                 if (!x.matches(match))
@@ -272,7 +274,7 @@ export class MountObserver extends EventTarget {
         this.#mount(elsToMount, initializing);
     }
     async #inspectWithin(within, initializing) {
-        const els = Array.from(within.querySelectorAll(this.#selector));
+        const els = Array.from(within.querySelectorAll(await this.#selector()));
         this.#filterAndMount(els, false, initializing);
     }
 }
@@ -318,3 +320,4 @@ export class AttrChangeEvent extends Event {
         this.attrChangeInfo = attrChangeInfo;
     }
 }
+//const hasRootInDefault =  ['data', 'enh', 'data-enh']

package/README.md

@@ -3,6 +3,7 @@
 [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/mount-observer?style=for-the-badge)](https://bundlephobia.com/result?p=mount-observer)
 <img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/mount-observer?compression=gzip">
 
+Note that much of what is described below has not yet been polyfilled.
 
 # The MountObserver api.
 
@@ -10,13 +11,13 @@ Author:  Bruce B. Anderson
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: 2023-11-23
+Last Update: 2024-2-14
 
 ## Benefits of this API
 
-What follows is a far more ambitious alternative to the [lazy custom element proposal](https://github.com/w3c/webcomponents/issues/782).  The goals of the MountObserver api are more encompassing, and less focused on registering custom elements.  In fact, this proposal addresses numerous use cases in one api.  It is basically mapping common filtering conditions in the DOM, to common actions, like importing a resource, or progressively enhancing an element, or "binding from a distance".
+What follows is a far more ambitious alternative to the [lazy custom element proposal](https://github.com/w3c/webcomponents/issues/782).  The goals of the MountObserver api are more encompassing, and less focused on registering custom elements.  In fact, this proposal addresses numerous use cases in one api.  It is basically mapping common filtering conditions in the DOM, to mounting a "campaign" of some sort, like importing a resource, and/or progressively enhancing an element, and/or "binding from a distance".
 
-"Binding from a distance" refers to empowering the developer to essentially manage their own "stylesheets" -- but rather than for purposes of styling, using these rules to attach behaviors, set property values, etc.
+["Binding from a distance"](https://github.com/WICG/webcomponents/issues/1035#issuecomment-1806393525) refers to empowering the developer to essentially manage their own "stylesheets" -- but rather than for purposes of styling, using these rules to attach behaviors, set property values, etc, to the HTML as it streams in.  Libraries that take this approach include [Corset](https://corset.dev/) and [trans-render](https://github.com/bahrus/trans-render).  The concept has been promoted by a [number](https://bkardell.com/blog/CSSLike.html) [of](https://www.w3.org/TR/NOTE-AS)  prominent voices in the community. 
 
 The underlying theme is this api is meant to make it easy for the developer to do the right thing, by encouraging lazy loading and smaller footprints. It rolls up most all the other observer api's into one.
 
@@ -24,7 +25,7 @@ The underlying theme is this api is meant to make it easy for the developer to d
 
 There is quite a bit of functionality this proposal would open up, that is exceedingly difficult to polyfill reliably:  
 
-1.  It is unclear how to use mutation observers to observe changes to [custom state](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet).  The closest thing might be a solution like [this](https://davidwalsh.name/detect-node-insertion), but that falls short for elements that aren't visible, or during template instantiation.
+1.  It is unclear how to use mutation observers to observe changes to [custom state](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet).  The closest thing might be a solution like [this](https://davidwalsh.name/detect-node-insertion), but that falls short for elements that aren't visible, or during template instantiation, and requires carefully constructed "negating" queries if needing to know when the css selector is no longer matching.
 
 2.  For simple css matches, like "my-element", or "[name='hello']" it is enough to use a mutation observer, and only observe the elements within the specified DOM region (more on that below).  But as CSS has evolved, it is quite easy to think of numerous css selectors that would require us to expand our mutation observer to need to scan the entire Shadow DOM realm, or the entire DOM tree outside any Shadow DOM, for any and all mutations (including attribute changes), and re-evaluate every single element within the specified DOM region for new matches or old matches that no longer match.  Things like child selectors, :has, and so on. All this is done, miraculously, by the browser in a performant way.  Reproducing this in userland using JavaScript alone, matching the same performance seems impossible.
 
@@ -36,11 +37,10 @@ The amount of code necessary to accomplish these common tasks designed to improv
 
 1.  Give the developer a strong signal to do the right thing, by 
     1.  Making lazy loading of resource dependencies easy, to the benefit of users with expensive networks.
-    2.  Supporting "binding from a distance" that can allow SSR to provide common, shared data using the "DRY" philosophy, similar to how CSS can reduce the amount of repetitive styling instructions found inline within the HTML Markup.
-    3.  Supporting "progressive enhancement."
-2.  Allow numerous components / libraries to leverage this common functionality, which could potentially significantly reduce bandwidth.
-3.  Potentially by allowing the platform to do more work in the low-level (c/c++/rust?) code, without as much context switching into the JavaScript memory space, which may reduce cpu cycles as well.
-4.  To do the job right, polyfills really need to reexamine **all** the elements within the observed node for matches **anytime any element within the Shadow Root so much as sneezes (has attribute modified, changes custom state, etc)**, due to modern selectors such as the :has selector.  Surely, the platform has found ways to do this more efficiently?  
+    2.  Supporting "binding from a distance" that can set property values of elements in bulk as the HTML streams in.  For example, say a web page is streaming in HTML with thousands of input elements (say a long tax form).  We want to have some indication in the head tag of the HTML (for example) to make all the input elements read only as they stream through the page. With css, we could do similar things, for example set the background to red of all input elements. Why can't we do something similar with setting properties like readOnly, disabled, etc?  With this api, giving developers the "keys" to css filtering, so they can "mount a campaign" to apply common settings on them all feels like something that almost every web developer has mentally screamed to themselves "why can't I do that?", doesn't it? 
+    3.  Supporting "progressive enhancement" more effectively.
+2.  Potentially by allowing the platform to do more work in the low-level (c/c++/rust?) code, without as much context switching into the JavaScript memory space, which may reduce cpu cycles as well.  This is done by passing into the API substantial number of conditions, which can all be evaluated at a lower level, before the api needs to surface up to the developer "found one!".
+3.  As discussed earlier, to do the job right, polyfills really need to reexamine **all** the elements within the observed node for matches **anytime any element within the Shadow Root so much as sneezes (has attribute modified, changes custom state, etc)**, due to modern selectors such as the :has selector.  Surely, the platform has found ways to do this more efficiently?  
 
 The extra flexibility this new primitive would provide could be quite useful to things other than lazy loading of custom elements, such as implementing [custom enhancements](https://github.com/WICG/webcomponents/issues/1000) as well as [binding from a distance](https://github.com/WICG/webcomponents/issues/1035#issuecomment-1806393525) in userland.
 
@@ -50,12 +50,12 @@ To specify the equivalent of what the alternative proposal linked to above would
 
 ```JavaScript
 const observer = new MountObserver({
-   match:'my-element',
+   on:'my-element',
    import: './my-element.js',
    do: {
-      onMount: ({localName}, {module}) => {
+      mount: ({localName}, {module}) => {
         if(!customElements.get(localName)) {
-            customElements.define(localName, module.default);
+            customElements.define(localName, module.MyElement);
         }
       }
    }
@@ -67,36 +67,43 @@ If no import is specified, it would go straight to do.* (if any such callbacks a
 
 This only searches for elements matching 'my-element' outside any shadow DOM.
 
-But the observe method can accept a shadowRoot, or a node inside a shadowRoot as well.
+But the observe method can accept a node within the document, or a shadowRoot, or a node inside a shadowRoot as well.
 
 The import can also be a function:
 
 ```JavaScript
 const observer = new MountObserver({
-   match: 'my-element',
+   on: 'my-element',
    import: async (matchingElement, {module}) => await import('./my-element.js');
 });
 observer.observe(myRootNode);
 ```
 
-which would work better with current bundlers, I suspect.  Also, we can do interesting things like merge multiple imports into one "module".  But should this API built into the platform, such functions wouldn't be necessary, as bundlers could start to recognize strings that are passed to the MountObserver's constructor.
+which would work better with current bundlers, I suspect.  Also, we can do interesting things like merge multiple imports into one "module".  But should this API be built into the platform, such functions wouldn't be necessary, as bundlers could start to recognize strings that are passed to the MountObserver's constructor.
 
-This proposal would also include support for CSS, JSON, HTML module imports.  
-
-"match" is a css query, and could include multiple matches using the comma separator, i.e. no limitation on CSS expressions.
+This proposal would also include support for CSS, JSON, HTML module imports. 
 
 The "observer" constant above is a class instance that inherits from EventTarget, which means it can be subscribed to by outside interests.
 
-<!-- As matches are found (for example, right away if matching elements are immediately found), the imports object would maintain a read-only array of weak references, along with the imported module:
+## Binding from a distance
+
+It is important to note that "on" is a css query with no restrictions.  So something like:
 
-```TypeScript
-interface MountContext {
-    weakReferences:  readonly WeakRef<Element>[];
-    module: any;
-}
+```JavaScript
+const observer = new MountObserver({
+   on:'div > p + p ~ span[class$="name"]',
+   do:{
+      mount: (matchingElement) => {
+         //attach some behavior or set some property value or add an event listener, etc.
+         matchingElement.textContent = 'hello';
+      }
+   }
+})
 ```
 
-This allows code that comes into being after the matching elements were found, to "get caught up" on all the matches. -->
+... would work.
+
+This would allow developers to create "stylesheet" like capabilities.
 
 
 ##  Extra lazy loading
@@ -107,7 +114,7 @@ However, we could make the loading even more lazy by specifying intersection opt
 
 ```JavaScript
 const observer = new MountObserver({
-   match: 'my-element',
+   on: 'my-element',
    whereElementIntersectsWith:{
       rootMargin: "0px",
       threshold: 1.0,
@@ -122,27 +129,31 @@ Unlike traditional CSS @import, CSS Modules don't support specifying different i
 
 ```JavaScript
 const observer = new MountObserver({
-   match: 'my-element',
+   on: 'div > p + p ~ span[class$="name"]',
    whereMediaMatches: '(max-width: 1250px)',
    whereSizeOfContainerMatches: '(min-width: 700px)',
    whereInstanceOf: [HTMLMarqueeElement],
    whereSatisfies: async (matchingElement, context) => true,
+   whereLangIn: ['en-GB'],
+   whereConnection:{
+      effectiveTypeIn: ["slow-2g"],
+   },
    import: ['./my-element-small.css', {type: 'css'}],
    do: {
-      onMount: ({localName}, {module}) => {
+      mount: ({localName}, {module}) => {
         ...
       },
-      onDismount: ...,
-      onDisconnect: ...,
-      onOutsideRootNode: ...,
-      onReconnect: ...,
-      onReconfirm: ...,
-      onOutOfScope: ...,
+      dismount: ...,
+      disconnect: ...,
+      reconnect: ...,
+      reconfirm: ...,
+      exit: ...,
+      forget: ...,
    }
 })
 ```
 
-Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  However, since these rules may be of interest to multiple parties, it is usesful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
+Callbacks like we see above are useful for tight coupling, and probably are unmatched in terms of performance.  However, since these rules may be of interest to multiple parties, it is useful to also provide the ability for multiple parties to subscribe to these css rules.  This can be done via:
 
 ## Subscribing
 
@@ -155,21 +166,22 @@ observer.addEventListener('mount', e => {
       module: e.module
    });
 });
-
 observer.addEventListener('dismount', e => {
   ...
 });
-
-observer.addEventListener('reconnect', e => {
+observer.addEventListener('disconnect', e => {
   ...
 });
-observer.addEventListener('disconnect', e => {
+observer.addEventListener('reconnect', e => {
   ...
 });
 observer.addEventListener('reconfirm', e => {
   ...
 });
-observer.addEventListener('out-of-scope', e => {
+observer.addEventListener('exit', e => {
+  ...
+});
+observer.addEventListener('forget', e => {
   ...
 });
 ```
@@ -184,49 +196,220 @@ If an element that is in "mounted" state according to a MountObserver instance i
 
 1)  "disconnect" event is dispatched from the MountObserver instance the moment the mounted element is disconnected from the DOM fragment.
 2)  If/when the element is added somewhere else in the DOM tree, the mountObserver instance will dispatch event "reconnect", regardless of where. [Note:  can't polyfill this very easily]
-3)  If the mounted element is added outside the rootNode being observed, the mountObserver instance will dispatch event "outside-root-node", and the MountObserver instance will relinquish any further responsibility for this element.  Ideally this would also be dispatched when the platform garbage collects the element as well after all hard references are relinquished.
-4)  If the new place it was added remains within the original rootNode and remains mounted, the MountObserver instance dispatches event "reconfirmed".
-5)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount".  
+3)  If the mounted element is added outside the rootNode being observed, the mountObserver instance will dispatch event "exit", and the MountObserver instance will relinquish any further responsibility for this element.  
+4)  Ideally event "forget" would be dispatched just before the platform garbage collects an element the MountObserver instance is still monitoring, after all hard references are relinquished (or is that self-contradictory?).
+5)  If the new place it was added remains within the original rootNode and remains mounted, the MountObserver instance dispatches event "reconfirmed".
+6)  If the element no longer satisfies the criteria of the MountObserver instance, the MountObserver instance will dispatch event "dismount".  
 
-## Special support for observable attributes
+## A tribute to attributes
 
-Extra support is provided for monitoring attributes.
+Extra support is provided for monitoring attributes.  There are two primary reasons for needing to provide special support for attributes with this API:
+
+Being that for both custom elements, as well as (hopefully) [custom enhancements](https://github.com/WICG/webcomponents/issues/1000) we need to carefully work with sets of "owned" [observed](https://github.com/WICG/webcomponents/issues/1045) attributes, and in some cases we may need to manage combinations of prefixes and suffixes for better name-spacing management, creating the most effective css query becomes challenging.
+
+We want to be alerted by the discovery of elements adorned by these attributes, but then continue to be alerted to changes of their values, and we can't enumerate which values we are interested in, so we must subscribe to all values as they change.
+
+### Scenario 1 -- Custom Element integration with ObserveObservedAttributes API [WIP]
 
 Example:
 
 ```html
 <div id=div>
-   <span id=span></span>
+   <my-custom-element my-first-observed-attribute="hello"></my-custom-element>
 </div>
 <script type=module>
    import {MountObserver} from '../MountObserver.js';
    const mo = new MountObserver({
-      match: '#span',
-      attribMatches:[
+      on: '*',
+      whereInstanceOf: [MyCustomElement]
+   });
+   mo.addEventListener('parsed-attrs-changed', e => {
+      const {matchingElement, modifiedObjectFieldValues, preModifiedFieldValues} = e;
+      console.log({matchingElement, modifiedObjectFieldValues, preModifiedFieldValues});
+   });
+   mo.observe(div);
+   setTimeout(() => {
+      const myCustomElement = document.querySelector('my-custom-element');
+      myCustomElement.setAttribute('my-first-observed-attribute', 'good-bye');
+   }, 1000);
+</script>
+```
+
+
+### Scenario 2 -- Custom Enhancements in userland
+
+Based on [the proposal as it currently stands](https://github.com/WICG/webcomponents/issues/1000), in this case the class prototype would *not* have the attributes defined as a static property of the class, so that the constructor arguments in the previous scenario wouldn't be sufficient.  So instead, what would seem to provide the most help for providing for custom enhancements in userland, and for any other kind of progressive enhancement based on attributes going forward.
+
+Suppose we have a progressive enhancement that we want to apply based on the presence of 1 or more attributes.
+
+To make this discussion concrete, let's suppose the "canonical" names of those attributes are:
+
+```html
+<div id=div>
+   <section 
+      my-enhancement=greetings 
+      my-enhancement-first-aspect=hello 
+      my-enhancement-second-aspect=goodbye
+      my-enhancement-first-aspect-wow-this-is-deep
+      my-enhancement-first-aspect-have-you-considered-using-json-for-this=just-saying
+   ></section>
+</div>
+```
+
+Now suppose we are worried about namespace clashes, plus we want to serve environments where HTML5 compliance is a must.
+
+So we also want to recognize additional attributes that should map to these canonical attributes:
+
+We want to also support:
+
+```html
+<div id=div>
+   <section class=hello 
+      data-my-enhancement=greetings 
+      data-my-enhancement-first-aspect=hello 
+      data-my-enhancement-second-aspect=goodbye
+      data-my-enhancement-first-aspect-wow-this-is-deep
+      data-my-enhancement-first-aspect-have-you-considered-using-json-for-this=just-saying
+   ></section>
+</div>
+```
+
+Based on the current unspoken rules, no one will raise an eyebrow with these attributes, because the platform has indicated it will generally avoid dashes in attributes (with an exception or two that will only happen in a blue moon, like aria-*).
+
+But now when we consider applying this enhancement to custom elements, we have a new risk.  What's to prevent the custom element from having an attribute named my-enhancement?
+
+So let's say we want to insist that on custom elements, we must have the data- prefix?
+
+And we want to support an alternative, more semantic sounding prefix to data, say enh-*, endorsed by [this proposal](https://github.com/WICG/webcomponents/issues/1000).
+
+Here's what the api provides:
+
+## Option 1 -- The carpal syndrome syntax
+
+```JavaScript
+import {MountObserver} from '../MountObserver.js';
+const mo = new MountObserver({
+   on: '*',
+   whereAttr:{
+      isIn: [
+         'data-my-enhancement',
+         'data-my-enhancement-first-aspect', 
+         'data-my-enhancement-second-aspect',
+         'enh-my-enhancement',
+         'enh-my-enhancement-first-aspect', 
+         'enh-my-enhancement-second-aspect',
+         //...some ten more combinations not listed
          {
-            names: ['test-1']
-         }
+            name: 'my-enhancement',
+            builtIn: true
+         },
+         {
+            name: 'my-enhancement-first-attr',
+            builtIn: true
+         },
+         {
+            name: 'my-enhancement-second-aspect',
+            builtIn: true
+         },
+         ...
       ]
+      
+   }
+});
+```
+
+## Option 2 -- The DRY Way
+
+```JavaScript
+import {MountObserver} from '../MountObserver.js';
+const mo = new MountObserver({
+   on: '*',
+   whereAttr:{
+      hasRootIn: ['data', 'enh', 'data-enh'],
+      hasBase: 'my-enhancement',
+      hasBranchIn: ['first-aspect', 'second-aspect', ''],
+      hasLeafIn: {
+         'first-aspect': ['wow-this-is-deep', 'have-you-considered-using-json-for-this'],
+      }
+   }
+});
+```
+
+MountObserver provides a breakdown of the matching attribute when encountered:
+
+```html
+<div id=div>
+   <section class=hello my-enhancement-first-attr-wow-this-is-deep="hello"></section>
+</div>
+<script type=module>
+   import {MountObserver} from '../MountObserver.js';
+   const mo = new MountObserver({
+      on: '*',
+      whereAttr:{
+         hasRootIn: ['data', 'enh', 'data-enh'],
+         hasBase: 'my-enhancement',
+         hasBranchIn: ['first-attr', 'second-attr', ''],
+         hasLeafIn: {
+            'first-attr': ['wow-this-is-deep', 'have-you-considered-using-json-for-this'],
+         }
+      }
    });
-   mo.addEventListener('attr-change', e => {
+   mo.addEventListener('observed-attr-change', e => {
       console.log(e);
       // {
+      //    matchingElement,
       //    attrChangeInfo:{
-      //       name: 'test-1',
+      //       name: 'data-my-enhancement-first-aspect-wow-this-is-deep'
+      //       root: 'data',
+      //       base: 'my-enhancement',
+      //       branch: 'first-attr',
+      //       leaf: 'wow-this-is-deep',
       //       oldValue: null,
-      //       newValue: 'hello'
+      //       newValue: 'good-bye'
       //       idx: 0,
       //    }
       // }
    });
    mo.observe(div);
    setTimeout(() => {
-      span.setAttribute('test-1', 'hello')
+      const myCustomElement = document.querySelector('my-custom-element');
+      myCustomElement.setAttribute('data-my-enhancement-first-aspect-wow-this-is-deep', 'good-bye');
    }, 1000);
 </script>
 ```
 
+Some libraries prefer to use the colon (:) rather than a dash to separate these levels of settings:
+
+Possibly some libraries may prefer to mix it up a bit:
+
+
+```html
+<div id=div>
+   <section class=hello 
+      data-my-enhancement=greetings 
+      data-my-enhancement:first-aspect=hello 
+      data-my-enhancement:second-aspect=goodbye
+      data-my-enhancement:first-aspect--wow-this-is-deep
+      data-my-enhancement:first-aspect--have-you-considered-using-json-for-this=just-saying
+   ></section>
+</div>
+```
+
+To support, specify the delimiter thusly:
 
+```JavaScript
+const mo = new MountObserver({
+   on: '*',
+   whereAttr:{
+      hasRootIn: ['data', 'enh', 'data-enh'],
+      hasBase: ['-', 'my-enhancement'],
+      hasBranchIn: [':', ['first-attr', 'second-attr', '']],
+      hasLeafIn: {
+         'first-attr': ['--', ['wow-this-is-deep', 'have-you-considered-using-json-for-this']],
+      }
+   }
+});
+```
 
 ## Preemptive downloading
 
@@ -243,15 +426,14 @@ So for this we add option:
 
 ```JavaScript
 const observer = new MountObserver({
-   match: 'my-element',
+   on: 'my-element',
    loading: 'eager',
    import: './my-element.js',
    do:{
-      onMount: (matchingElement, {module}) => customElements.define(module.MyElement)
+      mount: (matchingElement, {module}) => customElements.define(module.MyElement)
    }
 })
 ```
 
 So what this does is only check for the presence of an element with tag name "my-element", and it starts downloading the resource, even before the element has "mounted" based on other criteria.
 
-

package/doWhereAttr.js

@@ -0,0 +1,43 @@
+import { AttrChangeEvent } from "./MountObserver.js";
+export function doWhereAttr(whereAttr, attributeName, target, oldValue, mo) {
+    const { hasRootIn, hasBase, hasBranchIn } = whereAttr;
+    const name = attributeName;
+    let restOfName = name;
+    let root;
+    let branch;
+    let idx = 0;
+    const hasBaseIsString = typeof hasBase === 'string';
+    const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
+    const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
+    if (hasRootIn !== undefined) {
+        for (const rootTest in hasRootIn) {
+            if (restOfName.startsWith(rootTest)) {
+                root = rootTest;
+                restOfName = restOfName.substring(root.length + rootToBaseDelimiter.length);
+                break;
+            }
+        }
+    }
+    if (!restOfName.startsWith(baseSelector))
+        return;
+    restOfName = restOfName.substring(hasBase.length);
+    if (hasBranchIn) {
+        for (const branchTest in hasBranchIn) {
+            if (restOfName.startsWith(branchTest)) {
+                branch = branchTest;
+                break;
+            }
+        }
+    }
+    const newValue = target.getAttribute(attributeName);
+    const attrChangeInfo = {
+        name,
+        root,
+        base: baseSelector,
+        branch,
+        oldValue,
+        newValue,
+        idx
+    };
+    mo.dispatchEvent(new AttrChangeEvent(target, attrChangeInfo));
+}

package/getWhereAttrSelector.js

@@ -0,0 +1,35 @@
+export function getWhereAttrSelector(whereAttr, withoutAttrs) {
+    const { hasBase, hasBranchIn, hasRootIn } = whereAttr;
+    const fullListOfAttrs = [];
+    //TODO:  share this block with doWhereAttr?
+    const hasBaseIsString = typeof hasBase === 'string';
+    const baseSelector = hasBaseIsString ? hasBase : hasBase[1];
+    const rootToBaseDelimiter = hasBaseIsString ? '-' : hasBase[0];
+    //end TODO
+    let prefixLessMatches = [baseSelector];
+    if (hasBranchIn !== undefined) {
+        let baseToBranchDelimiter = '-';
+        let branches;
+        if (hasBranchIn.length === 2 && Array.isArray(hasBranchIn[1])) {
+            baseToBranchDelimiter = hasBranchIn[0];
+            branches = hasBranchIn[1];
+        }
+        else {
+            branches = hasBranchIn;
+        }
+        prefixLessMatches = branches.map(x => `${baseSelector}${baseToBranchDelimiter}x`);
+    }
+    const stems = hasRootIn || [''];
+    for (const stem of stems) {
+        const prefix = typeof stem === 'string' ? stem : stem.path;
+        for (const prefixLessMatch of prefixLessMatches) {
+            fullListOfAttrs.push(prefix.length === 0 ? prefixLessMatch : `${prefix}${rootToBaseDelimiter}${prefixLessMatch}`);
+        }
+    }
+    const listOfSelectors = fullListOfAttrs.map(s => `${withoutAttrs}[${s}]`);
+    const calculatedSelector = listOfSelectors.join(',');
+    return {
+        fullListOfAttrs,
+        calculatedSelector
+    };
+}

package/package.json

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

package/types.d.ts

@@ -1,17 +1,18 @@
 export interface MountInit{
-    readonly match?: CSSMatch,
-    readonly attribMatches?: Array<AttribMatch>,  
+    readonly on?: CSSMatch,
+    //readonly attribMatches?: Array<AttribMatch>,
+    readonly whereAttr?: WhereAttr,  
     readonly whereElementIntersectsWith?: IntersectionObserverInit,
     readonly whereMediaMatches?: MediaQuery,
     readonly whereInstanceOf?: Array<typeof Node>, //[TODO] What's the best way to type this?,
     readonly whereSatisfies?: PipelineProcessor<boolean>,
     readonly import?: ImportString | [ImportString, ImportAssertions] | PipelineProcessor,
     readonly do?: {
-        readonly onMount?: PipelineProcessor,
-        readonly onDismount?: PipelineProcessor,
-        readonly onDisconnect?: PipelineProcessor,
-        readonly onReconfirmed?: PipelineProcessor,
-        readonly onOutsideRootNode?: PipelineProcessor,
+        readonly mount?: PipelineProcessor,
+        readonly dismount?: PipelineProcessor,
+        readonly disconnect?: PipelineProcessor,
+        readonly reconfirm?: PipelineProcessor,
+        readonly exit?: PipelineProcessor,
     }
     // /**
     //  * Purpose -- there are scenarios where we may only want to affect changes that occur after the initial 
@@ -19,6 +20,14 @@ export interface MountInit{
     //  */
     // readonly ignoreInitialMatches?: boolean,
 }
+export interface WhereAttr{
+    hasBase: string | [string, string],
+    hasBranchIn?: Array<string> | [string, Array<string>],
+    hasRootIn?: Array<string | {
+        path: string,
+        context: 'BuiltIn' | 'CustomElement' | 'Both'
+    }>,
+}
 type CSSMatch = string;
 type ImportString = string;
 type MediaQuery = string;
@@ -62,6 +71,10 @@ export interface AddMutationEventListener {
 
 interface AttrChangeInfo{
     name: string,
+    root?: string,
+    base?: string,
+    branch?: string,
+    leaf?: string, //TODO
     oldValue: string | null,
     newValue: string | null,
     idx: number,