css - 样式部分如何与 Polymer.dart 模板一起使用？

Question

我想知道 Polymer.dart 元素声明中的 style (...) 部分如何在内部交互，它能否从容器继承任何样式？

我正在查看 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>

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

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

同样，dart 对象上的方法是否可以像私有(private)数据一样访问样式？

我还没有找到style 部分的文档。我假设本节打算遵循

• W3C HTML Templates草稿

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

谢谢。

Answer 1

您从中复制代码的图像已过时。

请使用这些页面之一作为引用如何设置自定义元素的样式:

• polymer - Styling reference
• polmyer - A Guide to Styling Elements

CSS 应如下所示:

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

注意
Dartium(Da​​rt 开发浏览器)通常落后几周。
最近从 ^ 和 ^^ 到 /shadow/ 和 /shadow-deep/ 的更改不起作用在 Dartium 中。