Polymer: Uncaught SyntaxError: Unexpected token ( - polymer

Question

I will get an error "Uncaught SyntaxError: Unexpected token (" and I dont know why if I use
the Polymer function.
I can't use document.querySelector('paper-shadow').setZ(3);, because then I get this error:
"Uncaught TypeError: Cannot read property 'setZ' of null" It
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/paper-input/paper-input.html">
<link rel="import" href="components/paper-shadow/paper-shadow.html">
<link rel="import" href="paper-input-search.html">
<link href="components/core-focusable/core-focusable.html" rel="import">
<link href="components/core-collapse/core-collapse.html" rel="import">
<link href="components/core-icons/core-icons.html" rel="import">
<link href="components/core-menu/core-menu.html" rel="import">
<link href="components/paper-button/paper-button.html" rel="import">
<link href="components/paper-dropdown/paper-dropdown.html" rel="import">
<link href="components/paper-icon-button/paper-icon-button.html" rel="import">
<link href="components/paper-item/paper-item.html" rel="import">
<link href="components/paper-menu-button/paper-menu-button.html" rel="import">
<polymer-element name="website-card" attributes="link searchatt canExtend extends">
<template>
<style> (...)
</style>
<paper-shadow z="{{shadowValue}}" fit></paper-shadow>
<div onMouseOver="{{overShadow}}" onClick="location.href='{{link}}'" class="card-header" layout horizontal center>
<paper-ripple fit></paper-ripple>
<content select="img"></content>
<content select="h2"></content>
</div>
(...)
<div layout horizontal>
<paper-input-search style="width:100%" searchaddr="{{searchatt}}" label="search" hidden?="{{searchatt == 'no'}}"></paper-input-search>
</div>
</template>
<script>
Polymer('website-card', {
publish:{
shadowValue: 1
},
overShadow: function(event, detail, sender){
shadowValue = 3;
console.log(shadowValue);
}
});
</script>
</polymer-element>

Answer 1

Two things going on here. paper-shadow has done some optimizations such that data binding doesn't work automatically, and you need to call setZ, as it appears that you've noticed. Doing a straight document.querySelector doesn't work because of the shadow dom. The solution is to combine setZ with [this.$][1]. So in the html:
<paper-shadow id='shadow' z='2'></paper-shadow>
And then in your javascript:
this.$.shadow.setZ(shadowValue)