dom4 v2

  * removed `query` and `queryAll` not standard anymore
  * added support for CSS `:scope` selector

Author: WebReflection

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 5
+  - stable
 git:
   depth: 1
 branches:

README.md

@@ -9,10 +9,14 @@ A fully tested and covered polyfill for new DOM Level 4 entries
 Many thanks to [cdnjs](http://www.cdnjs.com) for hosting this script. Following an example on how to include it.
 ```html
 <script
-  src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"
+  src="//cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"
 >/* DOM4 */</script>
 ```
 
+### New v2
+
+Both `query` and `queryAll` have been removed, while CSS `:scope` selector has been added.
+
 
 ## Features
 This is a [fully tested](http://webreflection.github.io/dom4/test/) and covered polyfill for both [new DOM Level 4 parentNode entries](https://dom.spec.whatwg.org/#parentnode):
@@ -31,10 +35,9 @@ The [implemented test](https://github.com/WebReflection/dom4/blob/master/test/do
 
 Other fixes/standardized behaviors include:
 
-  * **new** [DOM Listener: capture, passive, and once](https://www.webreflection.co.uk/blog/2016/04/17/new-dom4-standards)
+  * [DOM Listener: capture, passive, and once](https://www.webreflection.co.uk/blog/2016/04/17/new-dom4-standards)
   * fully normalized `KeyboardEvent`, `MouseEvent` and the latest way to create `new Event('type')`
-  * [Elements as Array subclass](http://www.w3.org/TR/2015/WD-dom-20150428/#elements), so that `el.query` is the relative equivalent of `el.querySelector` and `el.queryAll` is the relative equivalent of `Array.prototype.slice.call(el.querySelectorAll(css))`. Relative means `node.query('body p')` won't return any `p` element contained in `node`, while old `querySelector` would.
-  * [DROPPED PROPOSAL](http://stackoverflow.com/questions/23269785/whats-the-difference-between-queryall-and-queryselectorall/38245620#38245620) **document.queryAll(css)** returns an Array so there's no need to use `Array.prototype.slice.call(document.querySelectorAll(str))` or `[...document.querySelectorAll(str)]` or `Array.from(document.querySelectorAll(css))`, just `queryAll` for a list or `query` to get one element. We can forget the `Selector` bit \o/
+  * CSS `:scope` selector for any HTML Element (no `document` since useless, sorry)
   * [classList](http://www.w3.org/TR/dom/#domtokenlist), with forced fixes for iOS 5.1 and Nokia ASHA Xpress Browser and early implementations
   * [CustomEvent](http://www.w3.org/TR/dom/#customevent) constructor for all browsers down to IE8
   * [Element#matches](https://dom.spec.whatwg.org/#dom-element-matches) utility to test elements against CSS selectors

build/dom4.js

@@ -121,7 +121,6 @@ THE SOFTWARE.
       },
       set: function(){}
     },
-    uid = 'dom4-tmp-'.concat(Math.random() * +new Date()).replace('.','-'),
     trim = /^\s+|\s+$/g,
     spaces = /\s+/,
     SPACE = '\x20',
@@ -148,50 +147,7 @@ THE SOFTWARE.
     ElementPrototype = (window.Element || Node || window.HTMLElement).prototype,
     HTMLSelectElement = window.HTMLSelectElement || createElement('select').constructor,
     selectRemove = HTMLSelectElement.prototype.remove,
-    ShadowRoot = window.ShadowRoot,
     SVGElement = window.SVGElement,
-    // normalizes multiple ids as CSS query
-    idSpaceFinder = / /g,
-    idSpaceReplacer = '\\ ',
-    createQueryMethod = function (methodName) {
-      var createArray = methodName === 'querySelectorAll';
-      return function (css) {
-        var a, i, id, query, nl, selectors, node = this.parentNode;
-        if (node) {
-          for (
-            id = this.getAttribute('id') || uid,
-            query = id === uid ? id : id.replace(idSpaceFinder, idSpaceReplacer),
-            selectors = css.split(','),
-            i = 0; i < selectors.length; i++
-          ) {
-            selectors[i] = '#' + query + ' ' + selectors[i];
-          }
-          css = selectors.join(',');
-        }
-        if (id === uid) this.setAttribute('id', id);
-        nl = (node || this)[methodName](css);
-        if (id === uid) this.removeAttribute('id');
-        // return a list
-        if (createArray) {
-          i = nl.length;
-          a = new Array(i);
-          while (i--) a[i] = nl[i];
-        }
-        // return node or null
-        else {
-          a = nl;
-        }
-        return a;
-      };
-    },
-    addQueryAndAll = function (where) {
-      if (!('query' in where)) {
-        where.query = ElementPrototype.query;
-      }
-      if (!('queryAll' in where)) {
-        where.queryAll = ElementPrototype.queryAll;
-      }
-    },
     properties = [
       'matches', (
         ElementPrototype.matchesSelector ||
@@ -269,9 +225,7 @@ THE SOFTWARE.
         if (parentNode) {
           parentNode.removeChild(this);
         }
-      },
-      'query', createQueryMethod('querySelector'),
-      'queryAll', createQueryMethod('querySelectorAll')
+      }
     ],
     slice = properties.slice,
     i = properties.length; i; i -= 2
@@ -311,23 +265,6 @@ THE SOFTWARE.
     }
   }
 
-  // bring query and queryAll to the document too
-  addQueryAndAll(document);
-
-  // brings query and queryAll to fragments as well
-  if (DocumentFragmentPrototype) {
-    addQueryAndAll(DocumentFragmentPrototype);
-  } else {
-    try {
-      addQueryAndAll(createDocumentFragment().constructor.prototype);
-    } catch(o_O) {}
-  }
-
-  // bring query and queryAll to the ShadowRoot too
-  if (ShadowRoot) {
-    addQueryAndAll(ShadowRoot.prototype);
-  }
-
   // most likely an IE9 only issue
   // see https://github.com/WebReflection/dom4/issues/6
   if (!createElement('a').matches('a')) {
@@ -757,6 +694,58 @@ THE SOFTWARE.
     if (MouseEvent !== o_O) MouseEvent = o_O;
   }
 
+  if (!document.querySelectorAll('*').forEach) {
+    (function () {
+      function patch(what) {
+        var querySelectorAll = what.querySelectorAll;
+        what.querySelectorAll = function qSA(css) {
+          var result = querySelectorAll.call(this, css);
+          result.forEach = Array.prototype.forEach;
+          return result;
+        };
+      }
+      patch(document);
+      patch(HTMLElement.prototype);
+    }());
+  }
+
+  try {
+    // https://drafts.csswg.org/selectors-4/#the-scope-pseudo
+    document.querySelector(':scope *');
+  } catch(o_O) {
+    (function () {
+      var counter = 0;
+      var parent = createElement('div');
+      var prefix = 'scope-' + (Math.random() * 1e9 >>> 0) + '-';
+      var proto = HTMLElement.prototype;
+      var querySelector = proto.querySelector;
+      var querySelectorAll = proto.querySelectorAll;
+      proto.querySelector = function qS(css) {
+        return find(this, querySelector, css);
+      };
+      proto.querySelectorAll = function qSA(css) {
+        return find(this, querySelectorAll, css);
+      };
+      function find(node, method, css) {
+        var oldID = node.id;
+        var noParent = !node.parentNode;
+        node.id = oldID || (prefix + counter++);
+        if (noParent) parent.appendChild(node);
+        var result = method.call(
+          node.parentNode,
+          css.replace(
+            /(^|,\s*)(:scope([ >]|$))?/g,
+            function ($0, $1, $2, $3) {
+              return $1 + '#' + node.id + ($3 || ' ');
+            }
+          )
+        );
+        if (noParent) parent.removeChild(node);
+        node.id = oldID;
+        return result;
+      }
+    }());
+  }
 }(window));(function (global){'use strict';
 
   // a WeakMap fallback for DOM nodes only used as key
@@ -861,7 +850,6 @@ THE SOFTWARE.
 
   var
     Event = global.CustomEvent,
-    hOP = Object.prototype.hasOwnProperty,
     dE = global.dispatchEvent,
     aEL = global.addEventListener,
     rEL = global.removeEventListener,
@@ -883,7 +871,7 @@ THE SOFTWARE.
         options.once ? '1' : '0'
       );
     },
-    augment, proto
+    augment
   ;
 
   try {
@@ -980,4 +968,4 @@ THE SOFTWARE.
     }());
   }
 
-}(self));
+}(self));

build/dom4.max.js

@@ -13,7 +13,7 @@
         ];
         </script>
         <script>// don't change code here
-        for(var i = 0; i < TESTS.length; document.write('<script src="src/' + TESTS[i++] + '.js"><' + '/script>'));
+        for(var i = 0; i < TESTS.length; document.write('<script src="build/' + TESTS[i++] + '.max.js?_=' + Math.random() + '"><' + '/script>'));
         function wru(wru){
           var
             all = [],

index.html

@@ -2,7 +2,7 @@
   "name": "dom4",
   "title": "DOM4",
   "description": "a fully tested and covered polyfill for new DOM Level 4 entries",
-  "version": "1.8.5",
+  "version": "2.0.0",
   "main": "build/dom4.max.js",
   "homepage": "https://github.com/WebReflection/dom4",
   "author": {

package.json

@@ -99,7 +99,6 @@
       },
       set: function(){}
     },
-    uid = 'dom4-tmp-'.concat(Math.random() * +new Date()).replace('.','-'),
     trim = /^\s+|\s+$/g,
     spaces = /\s+/,
     SPACE = '\x20',
@@ -126,50 +125,7 @@
     ElementPrototype = (window.Element || Node || window.HTMLElement).prototype,
     HTMLSelectElement = window.HTMLSelectElement || createElement('select').constructor,
     selectRemove = HTMLSelectElement.prototype.remove,
-    ShadowRoot = window.ShadowRoot,
     SVGElement = window.SVGElement,
-    // normalizes multiple ids as CSS query
-    idSpaceFinder = / /g,
-    idSpaceReplacer = '\\ ',
-    createQueryMethod = function (methodName) {
-      var createArray = methodName === 'querySelectorAll';
-      return function (css) {
-        var a, i, id, query, nl, selectors, node = this.parentNode;
-        if (node) {
-          for (
-            id = this.getAttribute('id') || uid,
-            query = id === uid ? id : id.replace(idSpaceFinder, idSpaceReplacer),
-            selectors = css.split(','),
-            i = 0; i < selectors.length; i++
-          ) {
-            selectors[i] = '#' + query + ' ' + selectors[i];
-          }
-          css = selectors.join(',');
-        }
-        if (id === uid) this.setAttribute('id', id);
-        nl = (node || this)[methodName](css);
-        if (id === uid) this.removeAttribute('id');
-        // return a list
-        if (createArray) {
-          i = nl.length;
-          a = new Array(i);
-          while (i--) a[i] = nl[i];
-        }
-        // return node or null
-        else {
-          a = nl;
-        }
-        return a;
-      };
-    },
-    addQueryAndAll = function (where) {
-      if (!('query' in where)) {
-        where.query = ElementPrototype.query;
-      }
-      if (!('queryAll' in where)) {
-        where.queryAll = ElementPrototype.queryAll;
-      }
-    },
     properties = [
       'matches', (
         ElementPrototype.matchesSelector ||
@@ -247,9 +203,7 @@
         if (parentNode) {
           parentNode.removeChild(this);
         }
-      },
-      'query', createQueryMethod('querySelector'),
-      'queryAll', createQueryMethod('querySelectorAll')
+      }
     ],
     slice = properties.slice,
     i = properties.length; i; i -= 2
@@ -289,23 +243,6 @@
     }
   }
 
-  // bring query and queryAll to the document too
-  addQueryAndAll(document);
-
-  // brings query and queryAll to fragments as well
-  if (DocumentFragmentPrototype) {
-    addQueryAndAll(DocumentFragmentPrototype);
-  } else {
-    try {
-      addQueryAndAll(createDocumentFragment().constructor.prototype);
-    } catch(o_O) {}
-  }
-
-  // bring query and queryAll to the ShadowRoot too
-  if (ShadowRoot) {
-    addQueryAndAll(ShadowRoot.prototype);
-  }
-
   // most likely an IE9 only issue
   // see https://github.com/WebReflection/dom4/issues/6
   if (!createElement('a').matches('a')) {
@@ -735,4 +672,56 @@
     if (MouseEvent !== o_O) MouseEvent = o_O;
   }
 
+  if (!document.querySelectorAll('*').forEach) {
+    (function () {
+      function patch(what) {
+        var querySelectorAll = what.querySelectorAll;
+        what.querySelectorAll = function qSA(css) {
+          var result = querySelectorAll.call(this, css);
+          result.forEach = Array.prototype.forEach;
+          return result;
+        };
+      }
+      patch(document);
+      patch(HTMLElement.prototype);
+    }());
+  }
+
+  try {
+    // https://drafts.csswg.org/selectors-4/#the-scope-pseudo
+    document.querySelector(':scope *');
+  } catch(o_O) {
+    (function () {
+      var counter = 0;
+      var parent = createElement('div');
+      var prefix = 'scope-' + (Math.random() * 1e9 >>> 0) + '-';
+      var proto = HTMLElement.prototype;
+      var querySelector = proto.querySelector;
+      var querySelectorAll = proto.querySelectorAll;
+      proto.querySelector = function qS(css) {
+        return find(this, querySelector, css);
+      };
+      proto.querySelectorAll = function qSA(css) {
+        return find(this, querySelectorAll, css);
+      };
+      function find(node, method, css) {
+        var oldID = node.id;
+        var noParent = !node.parentNode;
+        node.id = oldID || (prefix + counter++);
+        if (noParent) parent.appendChild(node);
+        var result = method.call(
+          node.parentNode,
+          css.replace(
+            /(^|,\s*)(:scope([ >]|$))?/g,
+            function ($0, $1, $2, $3) {
+              return $1 + '#' + node.id + ($3 || ' ');
+            }
+          )
+        );
+        if (noParent) parent.removeChild(node);
+        node.id = oldID;
+        return result;
+      }
+    }());
+  }
 }(window));