如何在 Dart Web UI 模板中设置元素样式？答案

【问题标题】：How do I style elements in Dart Web UI templates?如何在 Dart Web UI 模板中设置元素样式？
【发布时间】：2013-04-27 09:31:09
【问题描述】：

假设我有一个自定义组件

<head>
  <link rel="stylesheet" src="...">
</head>

<body>
  <element name="elem">
    <template>
      <ul class="foo">
...

引用的样式表有一个条目

ul .foo {
  list-style-type: none;
}

问题是我无法将样式应用于 ul。除非我将 style 属性放在 ul 元素本身上，否则我尝试的任何方法都不起作用。我尝试过使用 scoped 属性，但这也不起作用。它做了一件奇怪的事情，其中 ul 的类变成了“elem_foo”。

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

感谢您的提问！这是我的做法：

在我的主要 HTML 中：

<div is="x-click-counter">

在我的自定义元素中：

<element name="x-click-counter" constructor="CounterComponent" extends="div">
  <template>
    <button class="button1" on-click="increment()">Click me</button><br />
    <span>(click count: {{count}})</span>
    <style scoped>
      div[is=x-click-counter] span {
        color: red;
      }
    </style>
  </template>
  <script type="application/dart" src="xclickcounter.dart"></script>
</element>

这里发生了两件事。

1) 我使用<div is="x-foo"> 的形式而不是<x-foo>。我喜欢第一种形式更向后兼容的方式，并且更明确地说明了我将如何找到元素。

2) 我在<template> 标签中添加了一个<style scoped>。

Web UI 将看到范围样式标签，并为您生成一个 CSS 文件。它看起来像这样：

/* Auto-generated from components style tags. */
/* DO NOT EDIT. */

/* ==================================================== 
   Component x-click-counter stylesheet 
   ==================================================== */
div[is=x-click-counter] span {
  color: #f00;
}

Web UI 还会将此生成的 CSS 文件的链接添加到您的主 HTML 文件中。

【讨论】：

"注意：尚不支持范围样式。"因此，这只是制作我假设的范围样式的 hacky 解决方法（？）。我想这个页面Appearance section 将在实际作用域样式开始工作时更新。有人会假设它会在受支持时自动限定编写的 css 范围。