CODEWITHSUNDEEP
javascript
runners3431
runners3431

Reputation: 1455

How does this polyfill work for document.queryselectorall?

I'm trying to understand this polyfill for queryselectorall? Specifially this line: 

styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";

https://gist.github.com/connrs/2724353

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement('STYLE');
        head.appendChild(styleTag);
        doc.__qsaels = [];

        styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
        window.scrollBy(0, 0);

        return doc.__qsaels;
    }
}

Upvotes: 1

Views: 297

Answers (1)

Bergi
Bergi

Reputation: 664599

It is abusing the expression "feature" of CSS. When computing the style of the x property (which happens on the reflow triggered by scrollBy(0, 0)), Internet Explorer will execute this snippet for all elements that match the selector.

CSS expressions are officially despised since IE 8…

Upvotes: 1

Related Questions