@webqit/oohtml 3.1.13 → 3.1.15

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,109 @@ 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 );
 }
 
+/**
+ * @init
+ * 
+ * @param Object config
+ * 
+ * @return String
+ */
+function lidUtil( config ) {
+	const { lidrefPrefix, lidrefSeparator, } = config.tokens;
+	return {
+		escape( str, mode = 1 ) { return [ ...str ].map( x => !/\w/.test( x ) ? ( mode === 2 ? `\\\\${ x }` : `\\${ x }` ) : x ).join( '' ); },
+		lidrefPrefix( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefPrefix, escapeMode ) : lidrefPrefix; },
+		lidrefSeparator( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefSeparator, escapeMode ) : lidrefSeparator; },
+		isUuid( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && str.includes( this.lidrefSeparator( escapeMode ) ); },
+		isLidref( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && !str.includes( this.lidrefSeparator( escapeMode ) ); },
+		toUuid( hash, lid, escapeMode = 0 ) { return `${ this.lidrefPrefix( escapeMode ) }${ hash }${ this.lidrefSeparator( escapeMode ) }${ lid }`; },
+		uuidToLid( str, escapeMode = 0 ) { return this.isUuid( str ) ? str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] : str; },
+		uuidToLidref( str, escapeMode = 0 ) { return this.isUuid( str ) ? `${ this.lidrefPrefix( escapeMode ) }${ str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] }` : str; },
+	}
+}
+
+/**
+ * @rewriteSelector
+ * 
+ * @param String selectorText
+ * @param String namespaceUUID
+ * @param String scopeSelector
+ * @param Bool escapeMode
+ * 
+ * @return String
+ */
+export function rewriteSelector( selectorText, namespaceUUID, scopeSelector = null, escapeMode = 0 ) {
+	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
+	const $lidUtil = lidUtil( config );
+	// Match :scope and relative ID selector
+	const regex = new RegExp( `${ scopeSelector ? `:scope|` : '' }#(${ $lidUtil.lidrefPrefix( escapeMode + 1 ) })?([\\w]+${ $lidUtil.lidrefSeparator( escapeMode + 1 ) })?((?:[\\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, lidrefPrefixMatch, lidrefSeparatorMatch, id, 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 ) ];
+			}
+			if ( quotesMatch[ 0 ] )
+			// Qualify match
+			if ( quotesMatch.some( q => index > q.index && index + match.length < q.index + q[ 0 ].length ) ) return match;
+			// Replace :scope
+			if ( match === ':scope' ) {
+				hadScopeSelector = true;
+				return scopeSelector;
+			}
+			const isLidref = lidrefPrefixMatch && !lidrefSeparatorMatch;
+			const isUuid = lidrefPrefixMatch && lidrefSeparatorMatch;			
+			if ( isUuid ) {
+				return `#${ $lidUtil.escape( match.replace( '#', '' ), 1 ) }`;
+			}
+			// Rewrite relative ID selector
+			let lowerBoundFactor = false;
+			if ( isLidref ) {
+				if ( config.attr.lid === 'id' && namespaceUUID ) {
+					return `#${ $lidUtil.toUuid( namespaceUUID, id, 1 ) }`;
+				}
+				// Fallback to attr-based
+				lowerBoundFactor = true;
+			}
+			// Rewrite absolute ID selector
+			let rewrite;
+			if ( config.attr.lid === 'id' ) {
+				rewrite = `[id^="${ $lidUtil.lidrefPrefix( escapeMode ) }"][id$="${ $lidUtil.lidrefSeparator( escapeMode ) }${ id }"]`;
+			} else {
+				rewrite = `:is(#${ id },[${ window.CSS.escape( config.attr.lid ) }="${ id }"])`;
+			}
+			return scopeSelector && lowerBoundFactor ? `:is(${ rewrite }):not(${ scopeSelector } [${ config.attr.namespace }] *)` : rewrite;
+		} );
+		// 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,29 +122,25 @@ export default function init( $config = {} ) {
  *
  * @return Object
  */
-function getNamespaceObject( node, config ) {
-	const window = this, { webqit: { Observer } } = window;
+export 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' );
 }
 
+/**
+ * @param Element node
+ *
+ * @return String
+ */
+export function getNamespaceUUID( node ) {
+	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
+	const namespaceObj = getNamespaceObject( node instanceof window.Document ? node : ( node.closest( `[${ config.attr.namespace }]` ) || node.ownerDocument ) );
+    return _fromHash( namespaceObj ) || _toHash( namespaceObj );
+}
+
 /**
  * Exposes Namespaced HTML with native APIs.
  *
@@ -65,10 +155,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 +170,185 @@ 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;
+
+    // ------------
+    // 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 );
 			}
-		} else if ( Observer.get( namespaceObj, identifier ) === entry ) {
-			_( entry ).delete( 'ownerNamespace' );
-			Observer.deleteProperty( namespaceObj, identifier );
+        } );
+    }, { 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 $lidUtil = lidUtil( config );
+
+	// Intercept getAttribute()
+	const getAttributeDescr = Object.getOwnPropertyDescriptor( window.Element.prototype, 'getAttribute' );
+	Object.defineProperty( window.Element.prototype, 'getAttribute', { ...getAttributeDescr, value( attrName ) {
+		const value = getAttributeDescr.value.call( this, attrName );
+		return !_( this, 'lock' ).get( attrName ) && attrList.includes( attrName ) ? ( attrName === 'id' ? $lidUtil.uuidToLid : $lidUtil.uuidToLidref ).call( $lidUtil, value ) : value;
+	} } );
+	// Intercept getElementById()
+	const getElementByIdDescr = Object.getOwnPropertyDescriptor( window.Document.prototype, 'getElementById' );
+	Object.defineProperty( window.Document.prototype, 'getElementById', { ...getElementByIdDescr, value( id ) {
+		return this.querySelector( `#${ id }`/* Will be rewritten at querySelector() */ );
+	} } );
+	// Intercept querySelector() and querySelectorAll()
+	for ( const queryApi of [ 'querySelector', 'querySelectorAll' ] ) {
+		for ( nodeApi of [ window.Document, window.Element ] ) {
+			const querySelectorDescr = Object.getOwnPropertyDescriptor( nodeApi.prototype, queryApi );
+			Object.defineProperty( nodeApi.prototype, queryApi, { ...querySelectorDescr, value( selector ) {
+				return querySelectorDescr.value.call( this, rewriteSelector.call( window, selector, getNamespaceUUID.call( window, this ) ) );
+			} } );
 		}
+	}
+	// 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 propertyDescr = Object.getOwnPropertyDescriptor( domApi.prototype, relMap[ attrName ] );
+			if ( !propertyDescr ) continue;
+			Object.defineProperty( domApi.prototype, relMap[ attrName ], { ...propertyDescr, get() {
+				return ( attrName === 'id' ? $lidUtil.uuidToLid : $lidUtil.uuidToLidref ).call( $lidUtil, propertyDescr.get.call( this, attrName ) || '' );
+			} } );
+		}
+	}
+	// Hide implementation details on the Attr node too.
+	const propertyDescr = Object.getOwnPropertyDescriptor( window.Attr.prototype, 'value' );
+	Object.defineProperty( window.Attr.prototype, 'value', { ...propertyDescr, get() {
+		const value = propertyDescr.get.call( this );
+		return attrList.includes( this.name ) ? ( this.name === 'id' ? $lidUtil.uuidToLid : $lidUtil.uuidToLidref ).call( $lidUtil, value ) : value;
+	} } );
+	if ( config.attr.lid !== 'id' ) {
+		// Reflect the custom [config.attr.lid] attribute
+		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 = $lidUtil.uuidToLid( oldValue );
+			if ( Observer.get( namespaceObj, lid ) === entry ) { Observer.deleteProperty( namespaceObj, lid ); }
+		} else {
+			const newAttrValue = oldValue.split( ' ' ).map( lid => ( lid = lid.trim() ) && $lidUtil.uuidToLidref( lid ) ).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 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 = $lidUtil.uuidToLid( value );
+			if ( Observer.get( namespaceObj, lid ) !== entry ) {
+				// Setup new namespace relationships
+				entry.setAttribute( 'id', $lidUtil.toUuid( namespaceUUID, lid ) );
+				Observer.set( namespaceObj, lid, entry );
 			}
-		}, { subtree: true, timing: 'sync' } );
-	}
-	// ----------------
+		} else {
+			const newAttrValue = value.split( ' ' ).map( lid => ( lid = lid.trim() ) && !$lidUtil.isLidref( lid ) ? lid : $lidUtil.toUuid( namespaceUUID, lid.replace( $lidUtil.lidrefPrefix(), '' ) ) ).join( ' ' );
+			entry.setAttribute( attrName, newAttrValue );
+		}
+		// Release locking
+		_( entry, 'lock' ).delete( attrName );
+	};
+
+	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 );
+				}
+				// 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( `#${ $lidUtil.lidrefPrefix() }` ) ) return;
+		const path = window.location.hash?.substring( `#${ $lidUtil.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 +358,8 @@ function realtime( config ) {
 			prevTarget = currTarget;
 		}
 	};
+	// "hash" realtime
 	window.addEventListener( 'hashchange', activateTarget );
 	realdom.ready( activateTarget );
+	// ----------------
 }

package/src/scoped-css/index.js

@@ -2,24 +2,51 @@
 /**
  * @imports
  */
-import { _init } from '../util.js';
+import { rewriteSelector, getNamespaceUUID } from '../namespaced-html/index.js';
+import { _init, _toHash } from '../util.js';
 
 /**
  * @init
  * 
  * @param Object $config
  */
-export default function init( { advanced = {}, ...$config } ) {
+export default function init({ advanced = {}, ...$config }) {
     const { config, window } = _init.call( this, 'scoped-css', $config, {
+        api: { styleSheets: 'styleSheets' },
         style: { retention: 'retain', mimeType: '', strategy: null },
     } );
-	config.styleSelector = ( Array.isArray( config.style.mimeType ) ? config.style.mimeType : [ config.style.mimeType ] ).reduce( ( selector, mm ) => {
+    config.styleSelector = (Array.isArray( config.style.mimeType ) ? config.style.mimeType : [ config.style.mimeType ] ).reduce( ( selector, mm ) => {
         const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
         return selector.concat( `style${ qualifier }[scoped]` );
     }, [] ).join( ',' );
+    window.webqit.oohtml.Style = {
+        compileCache: new Map,
+    };
+    exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function exposeAPIs( config ) {
+    const window = this, styleSheetsMap = new Map;
+    if ( config.api.styleSheets in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.styleSheets }" property!` ); }
+    Object.defineProperty( window.HTMLElement.prototype, config.api.styleSheets, { get: function() {
+        if ( !styleSheetsMap.has( this ) ) { styleSheetsMap.set( this, [] ); }
+        return styleSheetsMap.get( this );
+    }, } );
+    Object.defineProperty( window.HTMLStyleElement.prototype, 'scoped', {
+        configurable: true,
+        get() { return this.hasAttribute( 'scoped' ); },
+        set( value ) { this.toggleAttribute( 'scoped', value ); },
+    } );
+}
+
 /**
  * Performs realtime capture of elements and builds their relationships.
  *
@@ -28,22 +55,93 @@ export default function init( { advanced = {}, ...$config } ) {
  * @return Void
  */
 function realtime( config ) {
-	const window = this, { webqit: { realdom } } = window;
-    if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = () => false; }
-    const handled = () => {};
-	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.styleSelector, record => {
+    const window = this, { webqit: { oohtml, realdom } } = window;
+    if ( !window.CSS.supports ) { window.CSS.supports = () => false; }
+    const handled = new WeakSet;
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.styleSelector, record => {
         record.entrants.forEach( style => {
-            if ( 'scoped' in style ) return handled( style );
-            if ( config.style.strategy === '@scope' ) {
-                Object.defineProperty( style, 'scoped', { value: style.hasAttribute( 'scoped' ) } );
-                if ( style.hasAttribute( 'ref' ) ) return; // Server-rendered
-                const uuid = `scoped${ uniqId() }`;
-                style.setAttribute( 'ref', uuid );
-                style.textContent = `@scope from (:has(> style[ref="${ uuid }"])) {\n${ style.textContent }\n}`;
+            if ( handled.has( style ) ) return;
+            handled.add( style );
+            if ( !style.scoped ) return;
+            style.parentNode[ config.api.styleSheets ].push( style );
+            // Do compilation
+            const sourceHash = _toHash( style.textContent );
+            const supportsHAS = CSS.supports( 'selector(:has(a,b))' );
+            const scopeSelector = supportsHAS ? `:has(> style[rand-${ sourceHash }])` : `[rand-${ sourceHash }]`;
+            const supportsScope = window.CSSScopeRule && false/* Disabled for buggy behaviour: rewriting selectorText within an @scope block invalidates the scoping */;
+            ( supportsHAS ? style : style.parentNode ).toggleAttribute( `rand-${ sourceHash }`, true );
+            if ( false ) {
+                let compiledSheet;
+                if ( !( compiledSheet = oohtml.Style.compileCache.get( sourceHash ) ) ) {
+                    compiledSheet = createAdoptableStylesheet.call( window, style, null, supportsScope, scopeSelector );
+                    oohtml.Style.compileCache.set( sourceHash, compiledSheet );
+                }
+                // Run now!!!
+                Object.defineProperty( style, 'sheet', { value: compiledSheet, configurable: true } );
+                style.textContent = '\n/*[ Shared style sheet ]*/\n';
+            } else {
+                const namespaceUUID = getNamespaceUUID.call( window, style );
+                upgradeSheet.call( this, style.sheet, namespaceUUID, !supportsScope && scopeSelector );
             }
         } );
-	}, { live: true, timing: 'intercept', generation: 'entrants' } );
+    }, { live: true, timing: 'intercept', generation: 'entrants' } );
     // ---
 }
 
-const uniqId = () => (0|Math.random()*9e6).toString(36);
+function createAdoptableStylesheet( style, namespaceUUID, supportsScope, scopeSelector ) {
+    const window = this, textContent = style.textContent;
+    let styleSheet, cssText = supportsScope ? `@scope (${ scopeSelector }) {\n${ textContent.trim() }\n}` : textContent.trim();
+    try {
+        styleSheet = new window.CSSStyleSheet;
+        styleSheet.replaceSync( cssText );
+        upgradeSheet.call( this, styleSheet, namespaceUUID, !supportsScope && scopeSelector );
+        document.adoptedStyleSheets.push( styleSheet );
+    } catch( e ) {
+        const style = window.document.createElement( 'style' );
+        window.document.body.appendChild( style );
+        style.textContent = cssText;
+        styleSheet = style.sheet;
+        upgradeSheet.call( this, styleSheet, namespaceUUID, !supportsScope && scopeSelector );
+    }
+    return styleSheet;
+}
+
+function upgradeSheet( styleSheet, namespaceUUID, scopeSelector = null ) {
+    const l = styleSheet?.cssRules.length || -1;
+    for ( let i = 0; i < l; ++i ) {
+        const cssRule = styleSheet.cssRules[ i ];
+        if ( cssRule instanceof CSSImportRule ) {
+            // Handle imported stylesheets
+            //upgradeSheet( cssRule.styleSheet, namespaceUUID, scopeSelector );
+            continue;
+        }
+        upgradeRule.call( this, cssRule, namespaceUUID, scopeSelector );
+    }
+}
+
+function upgradeRule( cssRule, namespaceUUID, scopeSelector = null ) {
+    if ( cssRule instanceof CSSStyleRule ) {
+        // Resolve relative IDs and scoping (for non-@scope browsers)
+        upgradeSelector.call( this, cssRule, namespaceUUID, scopeSelector );
+        return;
+    }
+    if ( [ window.CSSScopeRule, window.CSSMediaRule, window.CSSContainerRule, window.CSSSupportsRule, window.CSSLayerBlockRule ].some( type => type && cssRule instanceof type ) ) {
+        // Parse @rule blocks
+        const l = cssRule.cssRules.length;
+        for ( let i = 0; i < l; ++i ) {
+            upgradeRule.call( this, cssRule.cssRules[ i ], namespaceUUID, scopeSelector );
+        }
+    }
+}
+
+function upgradeSelector( cssRule, namespaceUUID, scopeSelector = null ) {
+    const newSelectorText = rewriteSelector.call( this, cssRule.selectorText, namespaceUUID, scopeSelector, 1 );
+    cssRule.selectorText = newSelectorText;
+    // Parse nested blocks. (CSS nesting)
+    if ( cssRule.cssRules ) {
+        const l = cssRule.cssRules.length;
+        for ( let i = 0; i < l; ++i ) {
+            upgradeSelector.call( this, cssRule.cssRules[ i ], namespaceUUID, /* Nesting has nothing to do with scopeSelector */ );
+        }
+    }
+}