jquery: IE8 Selector Bug

Problem / Issue

There’s a known issue with IE8 and HTML5, that when it clones/adds a non-standard element to the page, it adds a blank prefix to the tag (and includes the colon).
Note: “non-standard” is not exactly correct, there are standard, less common elements that this also happens to.

jQuery is not selecting those blank-prefixed elements when there’s a multi-stage (combo) selector. It works with find() and using the tagname without the prefix, but not when using a selector pattern like $('<ancestor> <descendant>');. Refer to the example below, for a clearer understanding.

Affected Browsers: I only know this applies to IE8. I’m doubtful that it applies to other versions of IE, but I’m not able to test.

---

Update

My statement above isn’t exactly correct; .find() doesn’t necessarily solve the issue. You’ll notice inconsistent behavior when you use pseudo-selectors, such as :visible. The demo shows that the IE8 bug (prefixed colon) is not handled using jQuery, and using pseudo-selectors should at least be consistent with selecting by element tagname (whether it includes the prefixed elements, or not). That is $('some-element'); and $('some-element:visible'); should return the same results, if there are no hidden some-element.

The behavior I found in IE8 is that $('some-element:visible') acts like $('some-element:visible,\\:some-element:visible'). What I’m after is something to patch the IE prefix bug so that $('some-element') acts like $('some-element,\\:some-element').

---

Demo / Test Case

http://jsfiddle.net/vol7ron/9sverLdu/ http://fiddle.jshell.net/vol7ron/9sverLdu/show/ (for IE8 testing)

<some-element>
    <span>foo</span>
</some-element>



<script>
    // Add custom element to DOM for IE8
    document.createElement('some-element');


    jQuery(document).ready(function ($) {
        var $el = $('some-element');
        var $clone = $el.clone();

        // create a copy of the element after the original
        // IE8 should create an element with a blank prefix <:some-element>...</:some-element>
        $el.after($clone);

        // method 1
        outputLength( 
            "$('some-element span').length", 
            $('some-element span') 
        );

        // method 2
        outputLength( 
            "$('some-element').find('span').length", 
            $('some-element').find('span') 
        );

        // method 3
        outputLength( 
            "$('some-element span, \\\\:some-element span').length", 
            $('some-element span, \\:some-element span') 
        );


        // method 4
        outputLength( 
            "$('some-element:visible span').length", 
            $('some-element:visible span') 
        );

    });

    function outputLength(_label, _elems){
        var $label  = jQuery('<label />').html(_label + ' : ');
        var $value  = jQuery('<span  />').html(_elems.length);
        var $output = jQuery('<div />').append($label,$value);
        jQuery('body').append($output);
        console.log($output.html(), _elems);  // incase you prefer console
    }
</script>