Question

我想知道Polymer.dart元素声明中的样式（...）部分是如何在内部交互的，它是否可以从容器中继承任何样式？

我正在研究Dart Polymer教程：

Define a Custom Element

这会显示样式部分。该示例表明该元素将具有LemonChiffon背景颜色。当我使用Dart编辑器运行时，背景与容器相同，即

<template>
  <style>
    @host {
      :scope {
        background-color: LemonChiffon;
        text-align: center;
        display: inline-block;
        border: solid 1px;
        padding: 10px 10px 10px 10px;
      }
    }
  </style>
  <div>
    <div>
      {{counter}}
    </div>
    <div>
      <button on-click="{{start}}" id="startButton">Start</button>
      <button on-click="{{stop}}"  id="stopButton">Stop</button>
      <button on-click="{{reset}}" id="resetButton">Reset</button>
    </div>
  </div>
</template>

这是一个错误吗？有时人们希望Element保持其样式，如本例所示。

有时我可能想要覆盖内部样式设置。是否有覆盖样式的设置？

同样，dart对象上的方法可以像私有数据那样访问样式吗？

我没有找到样式部分的文档。我正在假设本节打算遵循

W3C HTML Templates草稿

无论如何，我认为选择器的Polymer实现可以明确说明什么有效以及预期做什么。欢迎所有关于聚合物样式部分的见解。

THX。

Answer 1

您复制代码的图片已过时。

请使用其中一个页面作为参考如何设置自定义元素的样式：

CSS应如下所示：

  :host {
    background-color: LemonChiffon;
    text-align: center;
    display: inline-block;
    border: solid 1px;
    padding: 10px 10px 10px 10px;
  }

注意
Dartium（Dart开发浏览器）通常会落后几周最近从^和^^到/shadow/和/shadow-deep/的更改尚未在Dartium中发挥作用。

样式部分如何使用Polymer.dart模板？

1 个答案: