scopedQuerySelectorShim

querySelector/querySelectorAll shims that enable the use of :scope

What is :scope in the context of querySelector?

:scope, when combined with the immediate child selector >, lets you query for elements that are immediate children of a HTMLElement instance.

For instance, you might want to find all list items of an unordered list that is an immediate child of node:

var listItems = node.querySelector(':scope > ul > li');

This is effectively equivalent to using jQuery's find():

var $listItems = $(node).find('> ul > li');

Simply include the JavaScript file:

<script src="scopeQuerySelectorShim.js"></script>

Tests :scope support before inserting itself, and uses it if it's available
- Falls back to an ID-based querySelector call against the the parent if not
Shimmed querySelectorAll returns a NodeList, just like the native method
Can be called on an element that does not have an ID
Can be called on an element that is not currently in the DOM
Modifies HTMLElement.prototype
Document.prototype's querySelector/querySelectorAll methods are not shimmed
- :scope is not relevant at the document level
- Use document.documentElement.querySelector instead without :scope

To run the tests:

npm install
grunt test

scopedQuerySelectorShim is licensed under the permissive BSD license.