Polymer breaks instanceof for native elements.

[tomalec]

I tried to use instanceof for native HTML element.

<button  onclick="alert(this instanceof Node)">Hit me!</button>

Full working example: http://jsbin.com/bod/2/edit

Just after inserting Polymer/platform it breaks: http://jsbin.com/bod/3/edit

According to http://www.polymer-project.org/platform/shadow-dom.html#wrappers, instanceof should still work. I've also tried ShadowDOMPolyfill.wrappers.Node: http://jsbin.com/bod/4/edit

Is it a bug, or known limitation? As it affects only inline use of this in Chrome (32.0.1700.107 m); with document.getElement... afterwards, or Canary it works perfectly fine.

[arv]

Unfortunately we don't fully handle HTML attribute event listeners. The code to support those would be large and complex. You are better off using js to add the event listeners or if you really want to use attributes just call a function from there.

<button>Hit me!</button>
<button onclick="doStuff()">Hit me!</button>
<script>
var button = document.querySelector('button');

button.onclick = function() {
  alert(this instanceof Node);
};

button.addEventListener('click', function() {
  alert(this instanceof Node);
});

function doStuff() {
  var button = document.querySelector('button');
  alert(button instanceof Node);  
}
</script>

[tomalec]

Thanks,
but my main problem is to use this instead of document.querySelector. That was just part of my overall problem, as I create HTML template on server-side (with many buttons and form elements in unknown structure) and would like to match element with value (to be changed by clicking the button) in HTML not in JS.

And achieve something that conceptually could look like:

<template bind>
    <button onclick="{{settable}} = this.value" value="smth new">Change settable to smth new</button>
</template>

So I have finally figured out something with wrap function:

<template bind>
    <button bind="{{settable}}" onclick="wrap(this).model.settable = this.value" value="smth new">{{caption}}</button>
</template>
<script>
    //in some general library, applicable for all inputs and forms
    Object.defineProperty(Node.prototype, 'model', {
      get: function () {
        return this.bindings && this.bindings.bind.object_;
      }
    });
</script>

<script>
    // for this particular template
    model = {
        caption: "Change `model.settable` to `button.value`.",
        settable: "Something"
    };
    document.querySelector("template").model = model;
</script>

Or even shorter:

<template bind>
    <button bind="{{settable}}" onclick="setModelValue(this)" value="smth new">{{caption}}</button>
</template>
<script>
    function setModelValue(element, value){
        return (element.bindings || wrap(element).bindings).bindings.bind.setValue( value || element.value );
    }
</script>
<!-- ... -->

So wrap helped me to fetch new Node -> Polymer Element out of this, and play with bindings in event attribute. There fore my initial problem seems to be solved (worked around).

However, wrap(this) instanceof HTMLButtonElement is still false. Could it somehow be one, or is it 'won't fix'?

Do you have any idea how to access such binding cleaner? or do you have any comments to my wrap solution, as I'm not so confident about it?

[arv]

However, wrap(this) instanceof HTMLButtonElement is still false. Could it somehow be one, or is it 'won't fix'?

That works for me:

http://codepen.io/anon/pen/BFcwi

[tomalec]

You're right, my bad, I probably typed something wrong ;) It works for me as well. Thanks