Question

我正在尝试用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）

谢谢，易

Answer 1

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

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

Answer 2

这是你想要做的吗？

  @host {
    :scope {
       ...
    }
  }

请参阅教程的这一部分：Styling a custom element

Dart聚合物造型阴影根元素与css

2 个答案: