webcomponents/webcomponentsjs

form.elements not according to w3 spec on safari

janvandenberg opened this issue · 2 comments

I have a third-party library which I use that does a IE 6/7 bug detection in my web application:

function testForNamePropertyBug(){
    var form = document.body.appendChild(document.createElement("form")), input = form.appendChild(document.createElement("input"));
    input.name = IFRAME_PREFIX + "TEST" + channelId; // append channelId in order to avoid caching issues
    HAS_NAME_PROPERTY_BUG = input !== form.elements[input.name];
    document.body.removeChild(form);
}

The problem is the line where form.elements[input.name] does not return a nodeList like the spec dictates (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) but a simple array. So this test provides a false positive. on Safari 8.0.3 with OSX 10.10.2.

Webcomponents.js is the reason why this happens. It polyfills the elements method and returns the wrong object:

    mixin(HTMLFormElement.prototype, {
      get elements() {
        return wrapHTMLCollection(unwrap(this).elements);
      }
    });

Could it be possible to fix this in future releases of webcomponents.js?

Could it be possible to fix this in future releases of webcomponents.js?

unfortunately, it's not possible to polyfill NodeList. (at least until EcmaScript 6 proxies are widely supported.) So there's no action we can take here. A few suggestions:

  • patch your third party library, so it checks for ShadowDOMPolyfill and understands it is not IE6/7 (I doubt webcomponents.js can load on IE < 9 ... see browser support)
  • use webcomponents-lite.js, which omits ShadowDOMPolyfill

Okay, thanks for the explanation!