Description
Repost of the following stackoverflow post which includes a workaround: http://stackoverflow.com/questions/24994129/typeerror-argument-1-of-window-getdefaultcomputedstyle-does-not-implement-inter
I have the following code outside my polymer element (in another polymer):
$(mainThis.shadowRoot.querySelector('#test1')).click(function(e){
mainThis.$.testelement.openPopup();
});
The line:
mainThis.$.testelement.openPopup();
Is causing error:
TypeError: Argument 1 of Window.getDefaultComputedStyle does not implement interface Element.
openPopup - is my custom function in polymer "testelement".
The error appears only in FireFox (version 31) on other browsers (Chrome, Safari, Opera) works perfect. How to fix it ?
Edit (openPopup function):
<script type="text/javascript">
Polymer('popup-element', {
domReady : function() {
var mainThis = this;
$(this.$.popup).on('click','.closebutton', function(e){
mainThis.closePopup();
});
},
openPopup : function (){
$(this.$.popup).show();
return this;
},
closePopup : function (){
$(this.$.popup).hide();
return this;
}
});
</script>
ANSWER
Ok, now I can see. I had the same problem. I have solved it like this:
Instead of:
$(this.$.popup).show();
Try this:
this.$.popup.style.display = "block";
It seems, it is impossible to use jQuery in polymer element javascript function when you execute it from another polymer element (in firefox only!). Please somebody smarter than me to improve this answer :)