为什么我的 CSS 在我的聚合物自动绑定模板中停止了？

Question

我正在尝试使用 CSS 和带有聚合物的自动绑定模板，但我运行遇到了一些问题。

我在 core-drawer-panel 中设置了 <core-header-panel main mode="waterfall-tall">。当我滚动时，这会导致我的 header 增大和缩小（gains/loses .tall class）。

我正在玩这个来隐藏和显示我的 link 选项卡。看看：

在我实施 'autobinding' 之前，我确实设置了一个 more-vert 菜单项，它仅在 .tall class 为 [=44 时出现=]那里没有。我正在使用这个 CSS 片段

core-toolbar.tall #morebutton {
  display: none;
}
core-toolbar.tall #morebutton-dropdown {
  display: none;
}
core-toolbar:not(.tall) #tabs {
  display: none;
}
core-dropdown {
    position: absolute;
    top: 38px;
    left: 0;
  }

还有这个html：

<body fullbleed layout vertical>
<core-drawer-panel id="drawerPanel">

  <core-header-panel drawer>
    <core-toolbar id="navheader" >
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="Welcome"><a href="#welcome" target="_self"></a></core-item>
      <core-item label="History"><a href="#history" target="_self"></a></core-item>
      <core-item label="Review"><a href="#reviews" target="_self"></a></core-item>
    </core-menu>
   </core-header-panel>

  <core-header-panel main mode="waterfall-tall">
    <core-toolbar id="mainheader" >
      <paper-icon-button id="navicon" icon="menu" ></paper-icon-button>
      <span flex>Malmesbury Tandoori</span>
      <span flex></span>
    <!-- <template is ="autobinding"> -->
    <div relative flex>
     <paper-icon-button id="morebutton" icon="more-vert"></paper-icon-button>
         <core-dropdown id="morebutton-dropdown" relatedTarget="{{$.morebutton}}">
          <core-menu>
            <core-item>Menu</core-item>
            <core-item>Find Us</core-item>
            <core-item>About</core-item>
          </core-menu>
        </core-dropdown>
      </div>
  <!-- </template> -->
  <paper-tabs id="tabs" class="bottom fit" noink layout scrollable selected="0" flex role="tablist" horizontal center layout>
    <paper-tab role="tab" flex center-center horizontal layout>
      <a href="index.html" class="tab-content">Home</a>
      <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
    </paper-tab> <paper-tab role="tab" flex center-center horizontal layout>
      <a href="menu.html" class="tab-content">Menu</a>
      <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
    </paper-tab>
    <paper-tab role="tab" flex center-center horizontal layout>
      <a href="FindUs.html" class="tab-content">Find Us</a>
      <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
    </paper-tab>
    <paper-tab role="tab" flex center-center horizontal layout>
      <a href="FindUs.html" class="tab-content">About Malmesbury Tandoori</a>
      <paper-ripple id="ink" initialopacity="0.95" opacitydecayvelocity="0.98"></paper-ripple>
    </paper-tab>
  </paper-tabs>

    </core-toolbar>
    <div class="content">
     ......
    </div >
  </core-header-panel>

</core-drawer-panel>
</body>

我已经注释掉了似乎破坏它的模板标签。没有那一点，它看起来像这样：

正如您从第二张图片中看到的那样，我的 css/html 设置被 autobinding 模板以某种方式破坏了。

我该如何解决这个问题？

Answer 1

应该是<template is="auto-binding">。在您的代码中，您没有使用破折号。

就我个人而言，我倾向于将 body 内的所有内容都包装在 auto-binding 模板中，这样所有内容都会同时消失。否则，您需要先监听要触发的 template-bound 事件，然后才能使用 JavaScript.

访问任何内容

为什么我的 CSS 在我的聚合物自动绑定模板中停止了？

Why has my CSS stopped inside of my polymer autobinding template?

css

data-binding

polymer