@webqit/oohtml 3.1.13 → 3.2.0

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "3.1.13",
+  "version": "3.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/api.global.js main.lite=src/api.global.lite.js namespaced-html=src/namespaced-html/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
-    "preversion": "npm run test && npm run build && git add -A dist",
+    "build": "esbuild main=src/api.global.js main.lite=src/api.global.lite.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "preversion": "npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },

package/src/bindings-api/DOMBindingsContext.js

@@ -52,5 +52,5 @@ export default class DOMBindingsContext extends DOMContext {
     /**
      * @unsubscribed()
      */
-     unsubscribed( event ) { event._controller?.abort(); }
+    unsubscribed( event ) { event._controller?.abort(); }
 }

package/src/bindings-api/index.js

@@ -55,27 +55,6 @@ function getBindings( config, node ) {
 	return _( node ).get( 'bindings' );
 }
 
-/**
- * Exposes Bindings with native APIs.
- *
- * @param Object            config
- * @param document|Element  target
- * @param Object            bindings
- * @param Object            params
- *
- * @return Void
- */
-function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
-    const window = this, { webqit: { Observer } } = window;
-    const bindingsObj = getBindings.call( this, config, target );
-    const $params = { diff, namespace };
-    const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
-    return Observer.batch( bindingsObj, () => {
-        if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
-        return Observer.set( bindingsObj, bindings, $params );
-    }, $params );
-}
-
 /**
  * Exposes Bindings with native APIs.
  *
@@ -104,3 +83,24 @@ function exposeAPIs( config ) {
         return Observer.proxy( getBindings.call( window, config, this ) );
     } } );
 }
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object            config
+ * @param document|Element  target
+ * @param Object            bindings
+ * @param Object            params
+ *
+ * @return Void
+ */
+function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
+    const window = this, { webqit: { Observer } } = window;
+    const bindingsObj = getBindings.call( this, config, target );
+    const $params = { diff, namespace };
+    const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
+    return Observer.batch( bindingsObj, () => {
+        if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
+        return Observer.set( bindingsObj, bindings, $params );
+    }, $params );
+}

package/src/data-binding/index.js

@@ -2,7 +2,7 @@
 /**
  * @imports
  */
-import { _, _init } from '../util.js';
+import { _, _init, _splitOuter } from '../util.js';
 
 /**
  * Initializes DOM Parts.
@@ -156,8 +156,8 @@ const inlineParseCache = new Map;
 function compileInlineBindings( config, str ) {
     if ( inlineParseCache.has( str ) ) return inlineParseCache.get( str );
     const validation = {};
-    const source = splitOuter( str, ';' ).map( str => {
-        const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
+    const source = _splitOuter( str, ';' ).map( str => {
+        const [ left, right ] = _splitOuter( str, ':' ).map( x => x.trim() );
         const directive = left[ 0 ], param = left.slice( 1 ).trim();
         const arg = `(${ right })`, $arg = `(${ arg } ?? '')`;
         if ( directive === '&' ) {
@@ -175,7 +175,7 @@ function compileInlineBindings( config, str ) {
             if ( param === 'text' ) return `$assign__(this, 'textContent', ${ $arg });`;
             if ( param === 'html' ) return `$exec__(this, 'setHTML', ${ $arg });`;
             if ( param === 'items' ) {
-                const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
+                const [ iterationSpec, importSpec ] = _splitOuter( right, '/' );
                 if ( !importSpec ) throw new Error( `Invalid ${ directive }items spec: ${ str }; no import specifier.` );
                 let [ raw, production, kind, iteratee ] = iterationSpec.trim().match( /(.*?[\)\s+])(of|in)([\(\{\[\s+].*)/i ) || [];
                 if ( !raw ) throw new Error( `Invalid ${ directive }items spec: ${ str }.` );
@@ -227,19 +227,4 @@ function compileInlineBindings( config, str ) {
     return compiled;
 }
 
-export function splitOuter( str, delim ) {
-    return [ ...str ].reduce( ( [ quote, depth, splits, skip ], x ) => {
-        if ( !quote && depth === 0 && ( Array.isArray( delim ) ? delim : [ delim ] ).includes( x ) ) {
-            return [ quote, depth, [ '' ].concat( splits ) ];
-        }
-        if ( !quote && [ '(', '[', '{' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth++;
-        if ( !quote && [ ')', ']', '}' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth--;
-        if ( [ '"', "'", '`' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) {
-            quote = quote === x ? null : ( quote || x );
-        }
-        splits[ 0 ] += x;
-        return [ quote, depth, splits ]
-    }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
-}
-
 const escDouble = str => str.replace(/"/g, '\\"');

package/src/html-imports/HTMLImportsContext.js

@@ -44,11 +44,9 @@ export default class HTMLImportsContext extends DOMContext {
 
         // Parse and translate detail
         if ( ( event.detail || '' ).trim() === '/' ) return event.respondWith( this.localModules );
-        const $config = this.configs.HTML_IMPORTS;
         let path = ( event.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
-        if ( path.length ) { path = path.join( `/${ $config.api.defs }/` )?.split( '/' ) || []; }
-        // No detail?
         if ( !path.length ) return event.respondWith();
+        path = path.join( `/${ this.configs.HTML_IMPORTS.api.defs }/` )?.split( '/' ) || [];
 
 
         // We'll now fulfill request

package/src/html-imports/index.js

@@ -73,6 +73,11 @@ function exposeAPIs( config ) {
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.def, { get: function() {
         return this.getAttribute( config.attr.def );
     } } );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, 'scoped', {
+        configurable: true,
+        get() { return this.hasAttribute( 'scoped' ); },
+        set( value ) { this.toggleAttribute( 'scoped', value ); },
+    } );
     Object.defineProperty( window.document, config.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( window.document, ...arguments );
     } } );
@@ -102,6 +107,7 @@ function exposeAPIs( config ) {
  */
 function realtime( config ) {
     const window = this, { webqit: { Observer, realdom, oohtml: { configs }, HTMLImportElement, HTMLImportsContext } } = window;
+    
     // ------------
     // MODULES
     // ------------
@@ -124,7 +130,6 @@ function realtime( config ) {
     realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( [ config.templateSelector, config.importsContextSelector ], record => {
         record.entrants.forEach( entry => {
             if ( entry.matches( config.templateSelector ) ) {
-                Object.defineProperty( entry, 'scoped', { value: entry.hasAttribute( 'scoped' ) } ); 
                 const htmlModule = HTMLModule.instance( entry );
                 htmlModule.ownerContext = entry.scoped ? record.target : window.document;
                 const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
@@ -148,6 +153,7 @@ function realtime( config ) {
             }
         } );
     }, { live: true, timing: 'sync', staticSensitivity: true } );
+    
     // ------------
     // IMPORTS
     // ------------

package/src/index.js

@@ -17,12 +17,12 @@ export default function init( QuantumJS, configs = {} ) {
     if ( !this.webqit ) { this.webqit = {}; }
     Object.assign( this.webqit, QuantumJS );
     // --------------
-    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) );
-    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
-    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
     BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) ); // Depends on ContextAPI
+    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
     HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
     DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) ); // Depends on NamespacedHTML
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------
 }

package/src/namespaced-html/DOMNamingContext.js

@@ -0,0 +1,54 @@
+
+/**
+ * @imports
+ */
+import DOMContext from '../context-api/DOMContext.js';
+import { env } from '../util.js';
+
+export default class DOMNamingContext extends DOMContext {
+
+    static kind = 'namespace';
+
+    /**
+     * @createRequest
+     */
+    static createRequest( detail = null ) {
+        const request = super.createRequest();
+        if ( detail?.startsWith( '@' ) ) {
+            const [ targetContext, ...detail ] = detail.slice( 1 ).split( '/' ).map( s => s.trim() );
+            request.targetContext = targetContext;
+            request.detail = detail.join( '/' );
+        } else { request.detail = detail; }
+        return request;
+    }
+
+    /**
+     * @namespaceObj
+     */
+    get namespaceObj() { return this.host[ this.configs.NAMESPACED_HTML.api.namespace ]; }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {
+        const { window: { webqit: { Observer } } } = env;
+        // Any existing event._controller? Abort!
+        event._controller?.abort();
+
+        // Parse and translate detail
+        if ( !( event.detail || '' ).trim() ) return event.respondWith( Observer.unproxy( this.namespaceObj ) );
+        let path = ( event.detail || '' ).split( '/' ).map( x => x.trim() ).filter( x => x );
+        if ( !path.length ) return event.respondWith();
+        path = path.join( `/${ this.configs.NAMESPACED_HTML.api.namespace }/` )?.split( '/' ) || [];
+
+        event._controller = Observer.reduce( this.namespaceObj, path, Observer.get, descriptor => {
+            if ( this.disposed ) return; // If already scheduled but aborted as in provider unmounting
+            event.respondWith( descriptor.value );
+        }, { live: event.live, signal: event.signal, descripted: true } );
+    }
+
+    /**
+     * @unsubscribed()
+     */
+    unsubscribed( event ) { event._controller?.abort(); }
+}

package/src/namespaced-html/index.js

@@ -2,7 +2,8 @@
 /**
  * @imports
  */
-import { _, _init } from '../util.js';
+import DOMNamingContext from './DOMNamingContext.js';
+import { _, _init, _splitOuter, _fromHash, _toHash } from '../util.js';
 
 /**
  * @init
@@ -11,16 +12,69 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'namespaced-html', $config, {
-		attr: { namespace: 'namespace', id: 'id', },
-		api: { namespace: 'namespace', eagermode: true, },
+		attr: { namespace: 'namespace', lid: 'id', },
+		api: { namespace: 'namespace', },
+		tokens: { lidrefPrefix: '~', lidrefSeparator: ':' },
 		target: { attr: ':target', event: ':target', scrolling: true },
     } );
-	config.idSelector = `[${ window.CSS.escape( config.attr.id ) }]`;
+	config.lidSelector = `[${ window.CSS.escape( config.attr.lid ) }]`;
 	config.namespaceSelector = `[${ window.CSS.escape( config.attr.namespace ) }]`;
+    window.webqit.DOMNamingContext = DOMNamingContext;
     exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
+/**
+ * @rewriteSelector
+ * 
+ * @param String selectorText
+ * @param String scopeSelector
+ * @param Bool isCssSelector
+ */
+export function rewriteSelector( selectorText, scopeSelector = null, isCssSelector = false ) {
+	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
+	const { lidrefPrefix, lidrefSeparator } = config.tokens;
+	// Match :scope and relative ID selector
+	const regex = new RegExp( `${ scopeSelector ? `:scope|` : '' }#${ [ ...lidrefPrefix ].map( x => !/\w/.test( x ) ? ( !isCssSelector ? `\\${ x }` : `\\\\${ x }` ) : x ).join( '' ) }([\\w-]|\\\\.)+`, 'g' );
+	// Parse potentially combined selectors individually and categorise into categories per whether they have :scope or not
+	const [ cat1, cat2 ] = _splitOuter( selectorText, ',' ).reduce( ( [ cat1, cat2 ], selector ) => {
+		// The deal: match and replace
+		let quotesMatch, hadScopeSelector;
+		selector = selector.replace( regex, ( match, unused/**/, index ) => {
+			if ( !quotesMatch ) { // Lazy: stuff
+				// Match strings between quotes (single or double) and use that qualify matches above
+				// The string: String.raw`She said, "Hello, John. I\"m your friend." or "you're he're" 'f\'"j\'"f'jfjf`;
+				// Should yield: `"Hello, John. I\\"m your friend."`, `"you're he're"`, `'f\\'"j\\'"f'`
+				quotesMatch = [ ...selector.matchAll( /(["'])(?:(?=(\\?))\2.)*?\1/g ) ];
+			}
+			// Qualify match
+			if ( quotesMatch.some( q => index > q.index && index + match.length < q.index + match.length ) ) return match;
+			// Replace :scope
+			if ( match === ':scope' ) {
+				hadScopeSelector = true;
+				return scopeSelector;
+			}
+			// Replace relative ID selector
+			const lidref = match.replace( `#${ !isCssSelector ? lidrefPrefix : [ ...lidrefPrefix ].map( x => !/\w/.test( x ) ? `\\${ x }` : x ).join( '' ) }`, '' );
+			if ( config.attr.lid === 'id' ) {
+				return `[id^="${ lidrefPrefix }"][id$="${ lidrefSeparator }${ lidref }"]`;
+			} else {
+				return `[${ window.CSS.escape( config.attr.lid ) }="${ lidref }"]`;
+			}
+		} );
+		// Category 2 has :scope and category 1 does not
+		return hadScopeSelector ? [ cat1, cat2.concat( selector ) ] : [ cat1.concat( selector ), cat2 ];
+	}, [ [], [] ] );
+	// Do the upgrade
+	let newSelectorText;
+	if ( scopeSelector && cat1.length ) {
+		newSelectorText = [ cat1.length > 1 ? `${ scopeSelector } :is(${ cat1.join( ', ' ) })` : `${ scopeSelector } ${ cat1[ 0 ] }`, cat2.join( ', ' ) ].filter( x => x ).join( ', ' );
+	} else {
+		newSelectorText = [ ...cat1, ...cat2 ].join( ', ' );
+	}
+	return newSelectorText;
+}
+
 /**
  * Returns the "namespace" object associated with the given node.
  *
@@ -28,24 +82,9 @@ export default function init( $config = {} ) {
  *
  * @return Object
  */
-function getNamespaceObject( node, config ) {
-	const window = this, { webqit: { Observer } } = window;
+function getNamespaceObject( node ) {
 	if ( !_( node ).has( 'namespace' ) ) {
 		const namespaceObj = Object.create( null );
-		Observer.intercept( namespaceObj, 'get', ( event, receiver, next ) => {
-			if ( Observer.has( namespaceObj, event.key ) || !config.api.eagermode ) return next();
-			const selector = `[${ window.CSS.escape( config.attr.id ) }="${ event.key }"]`;
-			const resultNode = Array.from( node.querySelectorAll( selector ) ).filter( idNode => {
-				const ownerRoot = idNode.parentNode.closest( config.namespaceSelector );
-				if ( node === window.document ) {
-					// Only IDs without a scope actually belong to the document scope
-					return !ownerRoot;
-				}
-				return ownerRoot === node;
-			} )[ 0 ];
-			if ( resultNode ) Observer.set( namespaceObj, event.key, resultNode );
-			return next();
-		} );
 		_( node ).set( 'namespace', namespaceObj );
 	}
 	return _( node ).get( 'namespace' );
@@ -65,10 +104,10 @@ function exposeAPIs( config ) {
     if ( config.api.namespace in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.namespace }" property!` ); }
     // Definitions
     Object.defineProperty( window.document, config.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, window.document, config ) );
+        return Observer.proxy( getNamespaceObject.call( window, window.document ) );
     } });
     Object.defineProperty( window.Element.prototype, config.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, this, config ) );
+        return Observer.proxy( getNamespaceObject.call( window, this ) );
     } } );
 }
 
@@ -80,50 +119,186 @@ function exposeAPIs( config ) {
  * @return Void
  */
 function realtime( config ) {
-	const window = this, { webqit: { Observer, realdom } } = window;
-	// ----------------
-	const handle = ( target, entry, incoming ) => {
-		const identifier = entry.getAttribute( config.attr.id );
-		const ownerRoot = target.closest( config.namespaceSelector ) || _( entry ).get( 'ownerNamespace' ) || window.document;
-		const namespaceObj = getNamespaceObject.call( window, ownerRoot, config );
-		if ( incoming ) {
-			if ( Observer.get( namespaceObj, identifier ) !== entry ) {
-				_( entry ).set( 'ownerNamespace', ownerRoot );
-				Observer.set( namespaceObj, identifier, entry );
+    const window = this, { webqit: { Observer, realdom, oohtml: { configs }, DOMNamingContext } } = window;
+	const { lidrefPrefix, lidrefSeparator } = config.tokens;
+
+    // ------------
+    // NAMESPACE
+    // ------------
+	window.document[ configs.CONTEXT_API.api.contexts ].attach( new DOMNamingContext );
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.namespaceSelector, record => {
+        record.exits.forEach( entry => {
+			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
+			const ctx = contextsApi.find( DOMNamingContext.kind );
+			if ( ctx ) { contextsApi.detach( ctx ); }
+        } );
+        record.entrants.forEach( entry => {
+			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
+			if ( !contextsApi.find( DOMNamingContext.kind ) ) {
+				contextsApi.attach( new DOMNamingContext );
+			}
+        } );
+    }, { live: true, timing: 'sync', staticSensitivity: true } );
+	
+	// ------------
+	// APIS
+    // ------------
+	// See https://wicg.github.io/aom/aria-reflection-explainer.html & https://github.com/whatwg/html/issues/3515 for the ARIA refelction properties idea
+	// See https://www.w3.org/TR/wai-aria-1.1/#attrs_relationships for the relational ARIA attributes
+	const idRefsAttrs = [ 'aria-owns', 'aria-controls', 'aria-labelledby', 'aria-describedby', 'aria-flowto', ];
+	const idRefAttrs = [ 'for', 'list', 'form', 'aria-activedescendant', 'aria-details', 'aria-errormessage', ];
+	const attrList = [ config.attr.lid, ...idRefsAttrs, ...idRefAttrs ];
+	const relMap = { id: 'id'/* just in case it's in attrList */, for: 'htmlFor', 'aria-owns': 'ariaOwns', 'aria-controls': 'ariaControls', 'aria-labelledby': 'ariaLabelledBy', 'aria-describedby': 'ariaDescribedBy', 'aria-flowto': 'ariaFlowto', 'aria-activedescendant': 'ariaActiveDescendant', 'aria-details': 'ariaDetails', 'aria-errormessage': 'ariaErrorMessage' };
+	const isUuid = str => str.startsWith( lidrefPrefix ) && str.includes( lidrefSeparator );
+	const isLidref = str => str.startsWith( lidrefPrefix ) && !str.includes( lidrefSeparator );
+	const toUuid = ( hash, lid ) => `${ lidrefPrefix }${ hash }${ lidrefSeparator }${ lid }`;
+	const uuidToLid = str => isUuid( str ) ? str.split( lidrefSeparator )[ 1 ] : str;
+	const uuidToLidref = str => isUuid( str ) ? `${ lidrefPrefix }${ str.split( lidrefSeparator )[ 1 ] }` : str;
+
+	// Intercept getAttribute()
+	const getAttribute = Object.getOwnPropertyDescriptor( window.Element.prototype, 'getAttribute' );
+	Object.defineProperty( window.Element.prototype, 'getAttribute', { ...getAttribute, value( attrName ) {
+		const value = getAttribute.value.call( this, attrName );
+		return !_( this, 'lock' ).get( attrName ) && attrList.includes( attrName ) ? ( attrName === 'id' ? uuidToLid : uuidToLidref )( value ) : value;
+	} } );
+	// Intercept getElementById()
+	const getElementById = Object.getOwnPropertyDescriptor( window.Document.prototype, 'getElementById' );
+	Object.defineProperty( window.Document.prototype, 'getElementById', { ...getElementById, value( id ) {
+		if ( !isLidref( id ) ) return getElementById.value.call( this, id );
+		const node = this.querySelector( rewriteSelector.call( window, `#${ id }` ) );
+		return node;// !node?.closest( config.namespaceSelector ) ? node : null; // Cool, but not consistent with querySelector(All)() results
+	} } );
+	// Intercept querySelector() and querySelectorAll()
+	for ( const queryApi of [ 'querySelector', 'querySelectorAll' ] ) {
+		for ( nodeApi of [ window.Document, window.Element ] ) {
+			const querySelector = Object.getOwnPropertyDescriptor( nodeApi.prototype, queryApi );
+			Object.defineProperty( nodeApi.prototype, queryApi, { ...querySelector, value( selector ) {
+				return querySelector.value.call( this, rewriteSelector.call( window, selector ) );
+			} } );
+		}
+	}
+	// These APIs should return LIDREFS minus the hash part
+	for ( const attrName of attrList ) {
+		if ( !( attrName in relMap ) ) continue;
+		const domApis = attrName === 'for' ? [ window.HTMLLabelElement, window.HTMLOutputElement ] : [ window.Element ];
+		for ( const domApi of domApis ) {
+			const idReflection = Object.getOwnPropertyDescriptor( domApi.prototype, relMap[ attrName ] );
+			if ( !idReflection ) continue;
+			Object.defineProperty( domApi.prototype, relMap[ attrName ], { ...idReflection, get() {
+				return ( attrName === 'id' ? uuidToLid : uuidToLidref )( idReflection.get.call( this, attrName ) || '' );
+			} } );
+		}
+	}
+	// Reflect the custom [config.attr.lid] attribute
+	if ( config.attr.lid !== 'id' ) {
+		Object.defineProperty( window.Element.prototype, config.attr.lid, { configurable: true, enumerable: true, get() {
+			return this.getAttribute( config.attr.lid );
+		}, set( value ) {
+			return this.setAttribute( config.attr.lid, value );
+		} } );
+	}
+
+	// ------------
+    // LOCAL IDS & IDREFS
+    // ------------
+	const cleanupBinding = ( entry, attrName, oldValue ) => {
+		// Create or honour locking
+		if ( _( entry, 'lock' ).get( attrName ) ) return;
+		_( entry, 'lock' ).set( attrName, true );
+		// A function can be passed in to be called after having done the _( entry, 'lock' ).set( attrName, true ); flag
+		if ( typeof oldValue === 'function' ) oldValue = oldValue();
+		// Get down to work
+		const namespaceObj = _( entry ).get( 'ownerNamespace' );
+		if ( attrName === config.attr.lid ) {
+			const lid = uuidToLid( oldValue );
+			if ( Observer.get( namespaceObj, lid ) === entry ) { Observer.deleteProperty( namespaceObj, lid ); }
+		} else {
+			const newAttrValue = oldValue.split( ' ' ).map( lid => ( lid = lid.trim() ) && uuidToLidref( lid ) ).join( ' ' );
+			entry.setAttribute( attrName, newAttrValue );
+		}
+		// Release locking
+		_( entry, 'lock' ).delete( attrName );
+	};
+	const setupBinding = ( entry, attrName, value ) => {
+		// Create or honour locking
+		if ( _( entry, 'lock' ).get( attrName ) ) return;
+		_( entry, 'lock' ).set( attrName, true );
+		// A function can be passed in to be called after having done the _( entry, 'lock' ).set( attrName, true ); flag
+		if ( typeof value === 'function' ) value = value();
+		// Get down to work
+		const namespaceObj = _( entry ).get( 'ownerNamespace' );
+		const namespaceUUID = _( entry ).get( 'namespaceUUID' );
+		if ( attrName === config.attr.lid ) {
+			const lid = uuidToLid( value );
+			if ( Observer.get( namespaceObj, lid ) !== entry ) {
+				// Setup new namespace relationships
+				entry.setAttribute( 'id', toUuid( namespaceUUID, lid ) );
+				Observer.set( namespaceObj, lid, entry );
 			}
-		} else if ( Observer.get( namespaceObj, identifier ) === entry ) {
-			_( entry ).delete( 'ownerNamespace' );
-			Observer.deleteProperty( namespaceObj, identifier );
+		} else {
+			const newAttrValue = value.split( ' ' ).map( lid => ( lid = lid.trim() ) && !isLidref( lid ) ? lid : toUuid( namespaceUUID, lid.replace( lidrefPrefix, '' ) ) ).join( ' ' );
+			entry.setAttribute( attrName, newAttrValue );
 		}
+		// Release locking
+		_( entry, 'lock' ).delete( attrName );
 	};
-	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.idSelector, record => {
-        record.entrants.forEach( entry => handle( record.target, entry, true ) );
-        record.exits.forEach( entry => handle( record.target, entry, false ) );
-	}, { live: true, timing: 'sync', staticSensitivity: true } );
-	// ----------------
-	if ( true/*config.staticsensitivity*/ ) {
-		realdom.realtime( window.document, 'attr' ).observe( config.attr.namespace, record => {
-			const ownerRoot = record.target.parentNode?.closest( config.namespaceSelector ) || _( record.target ).get( 'ownerNamespace' ) || window.document;
-			const ownerRootNamespaceObj = getNamespaceObject.call( window, ownerRoot, config );
-			const namespaceObj = getNamespaceObject.call( window, record.target, config );
-			if ( record.target.matches( config.namespaceSelector ) ) {
-				for ( const [ key, entry ] of Object.entries( ownerRootNamespaceObj ) ) {
-					if ( !record.target.contains( entry.parentNode ) ) continue;
-					Observer.deleteProperty( ownerRootNamespaceObj, key );
-					Observer.set( namespaceObj, key, entry );
-				}
-			} else {
-				for ( const [ key, entry ] of Object.entries( namespaceObj ) ) {
-					Observer.deleteProperty( namespaceObj, key );
-					Observer.set( ownerRootNamespaceObj, key, entry );
+
+	const cleanupAllBindings = ( entry, total = true ) => {
+		for ( const attrName of attrList ) {
+			if ( !entry.hasAttribute( attrName ) ) continue;
+			cleanupBinding( entry, attrName, () => entry.getAttribute( attrName ) );
+		}
+		_( entry ).delete( 'ownerNamespace' );
+		_( entry ).delete( 'namespaceUUID' );
+		if ( total ) {
+			_( entry ).get( 'namespaceBinding' ).abort();
+			_( entry ).delete( 'namespaceBinding' );
+		}
+	};
+	const setupAllBindings = ( entry ) => {
+		if ( !_( entry ).get( 'ownerNamespace' ) ) {
+			const request = { ...DOMNamingContext.createRequest(), live: true };
+			const binding = entry.parentNode[ configs.CONTEXT_API.api.contexts ].request( request, namespaceObj => {
+				// Cleanup of previous namespace?
+				if ( _( entry ).get( 'namespaceUUID' ) ) {
+					cleanupAllBindings( entry, false );
 				}
-			}
-		}, { subtree: true, timing: 'sync' } );
-	}
-	// ----------------
+				// Setup new namespace
+				_( entry ).set( 'ownerNamespace', namespaceObj );
+				_( entry ).set( 'namespaceUUID', _fromHash( namespaceObj ) || _toHash( namespaceObj ) );
+				setupAllBindings( entry );
+			} );
+			_( entry ).set( 'namespaceBinding', binding );
+			return;
+		}
+		for ( const attrName of attrList ) {
+			if ( !entry.hasAttribute( attrName ) ) continue;
+			setupBinding( entry, attrName, () => entry.getAttribute( attrName ) );
+		}
+	};
+
+	// DOM realtime
+	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( `[${ attrList.map( attrName => window.CSS.escape( attrName ) ).join( '],[' ) }]`, record => {
+		record.exits.forEach( cleanupAllBindings );
+		record.entrants.forEach( setupAllBindings );
+	}, { live: true, timing: 'sync' } );
+	// Attr realtime
+	realdom.realtime( window.document, 'attr' ).observe( attrList, records => {
+		for ( const record of records ) {
+			if ( record.oldValue ) {
+				cleanupBinding( record.target, record.name, record.oldValue );
+				if ( record.value ) { setupBinding( record.target, record.name, record.value ); }
+			} else { setupAllBindings( entry ); }
+		}
+	}, { subtree: true, timing: 'sync', newValue: true, oldValue: true } );
+
+    // ------------
+	// TARGETS
+    // ------------
 	let prevTarget;
 	const activateTarget = () => {
-		const path = window.location.hash?.substring( 1 ).split( '/' ).map( s => s.trim() ).filter( s => s ) || [];
+		if ( !window.location.hash?.startsWith( `#${ lidrefPrefix }` ) ) return;
+		const path = window.location.hash?.substring( `#${ lidrefPrefix }`.length ).split( '/' ).map( s => s.trim() ).filter( s => s ) || [];
 		const currTarget = path.reduce( ( prev, segment ) => prev && prev[ config.api.namespace ][ segment ], window.document );
 		if ( prevTarget && config.target.attr ) { prevTarget.toggleAttribute( config.target.attr, false ); }
 		if ( currTarget && currTarget !== window.document ) {
@@ -133,6 +308,8 @@ function realtime( config ) {
 			prevTarget = currTarget;
 		}
 	};
+	// "hash" realtime
 	window.addEventListener( 'hashchange', activateTarget );
 	realdom.ready( activateTarget );
+	// ----------------
 }