1

我正在尝试使用 css 设置聚合物元素的根元素的样式。以反击为例。如果我的主 html 中有一个聚合物元素并且我想给它一个大小（比如宽度和高度）。我尝试在我的主 html 中使用全局 css

click-counter{
width:100px;
height:100px;
}

这行不通。

我还尝试在聚合物元素内部设置样式，例如

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      @host{
        click-counter {
          width:100px;
          height:100px;
        }
      }
      ...

这也不起作用。有谁知道我将如何使用 css 设置元素的样式？（我正在使用飞镖 0.8.1.2）

谢谢，易

4

2 回答 2

2

点击计数器由一个按钮和一个文本输入组成。没有将 2 组合在一起的 div。因此，如果您要设置组件的宽度和高度，那么您真正设置的是什么？

<polymer-element name="click-counter">
  <template>
    <button on-click="increment">Click Me</button>
    <p>You clicked the button {{count}} times.</p>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

如果有一个 div 包裹按钮和文本输入，您可以像这样在组件中设置 div 的宽度：

<polymer-element name="click-counter">
  <template>
  <style type="text/css">
      div{
        width:100px;
        border-style:solid;
        background-color: #FF9900;
        font-weight: bold;
      }
    </style>
    <div>
      <button on-click="increment">Click Me</button>
      <p>You clicked the button {{count}} times.</p>
    </div>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

您也可以在索引文件上声明一个 div 样式，但是您必须在组件上设置applyAuthorStyles为true。

@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement with ObservableMixin {
  @observable int count = 0;

  get applyAuthorStyles => true;

  void increment(Event e, var detail, Node target) {
    count += 1;
  }
}

这会影响页面上的所有 div。我不确定如何只选择点击计数器组件中的根 div。

于 2013-10-11T06:41:57.847 回答
1

这是你想做的吗？

  @host {
    :scope {
       ...
    }
  }

请参阅本教程的这一部分：样式化自定义元素

于 2013-10-31T02:16:40.440 回答