element-qsa-scope

QSA Scope

Return elements matching a selector relative to the current node

QSA Scope is a polyfill for :scope support within QSA methods (#Element.querySelector and #Element.querySelectorAll).

<ul>
    <li><a>Link</a>
        <ul>
            <li><a>Sublink</a></li>
        </ul>
    </li>
</ul>
<script>
li = document.querySelector('ul li')
</script>

By default, QSA methods return any element matching the CSS selector absolutely, similar to the element being matched by #Element.matches.

li.querySelector('li a'); // returns <a>Link</a> due to it technically matching

Adding scope is especially useful when traversing the DOM.

li.querySelector(':scope li a'); // returns <a>Sublink</a> due to its context

Browser compatibility

Browser	Native Support	Polyfill Support
Android	✘	2.2+
Blackberry	✘	7+
Chrome	27+	4 - 26
Edge	✘	12+
Firefox	32+	3.5 - 31
Internet Explorer	✘	8 - 11
Opera	15+	10 - 14
Opera Mini	✘	5+
Safari (iOS)	✘	3.2 - 8.4
Safari (MacOS)	6.2+	4 - 6

Test Results

Additional tests were run against the latest 3 versions of browsers, including common outliers such as Internet Explorer 8+ and Safari 6+.

Native Support Polyfilled Support

Changelog

1.0.0 (October 13, 2016)

• Initial release