带有 css 的 Dart 聚合物造型阴影根元素答案

【问题标题】：Dart polymer styling shadow root element with css带有 css 的 Dart 聚合物造型阴影根元素
【发布时间】：2013-10-10 17:36:08
【问题描述】：

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

谢谢，易

【问题讨论】：

你需要使用apply-author-styles属性我觉得，[this][1]指的是[1]：stackoverflow.com/questions/18261596/…
这个属性我也试过了，还是不行。

标签： css dart dart-polymer

【解决方案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。

【讨论】：

【解决方案2】：

这是你想做的吗？

  @host {
    :scope {
       ...
    }
  }

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

【讨论】：