聚合物：未捕获的语法错误：意外的令牌（答案

【问题标题】：Polymer: Uncaught SyntaxError: Unexpected token (聚合物：未捕获的语法错误：意外的令牌（
【发布时间】：2014-11-23 09:10:02
【问题描述】：

我会得到一个错误“Uncaught SyntaxError: Unexpected token (”，如果我使用我不知道为什么 Polymer 函数。

我不能使用document.querySelector('paper-shadow').setZ(3);，因为我得到了这个错误： “未捕获的类型错误：无法读取 null 的属性 'setZ'”它

<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>

【问题讨论】：

标签： polymer

【解决方案1】：

这里发生了两件事。 paper-shadow 做了一些优化，使得数据绑定不能自动工作，你需要调用setZ，你似乎已经注意到了。由于 shadow dom，直接执行 document.querySelector 不起作用。解决方案是将setZ 与[this.$][1] 结合使用。所以在html中：

<paper-shadow id='shadow' z='2'></paper-shadow>

然后在你的javascript中：

this.$.shadow.setZ(shadowValue)

【讨论】：