Question

假设我有一个带

的自定义组件

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

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

引用的样式表有一个条目

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

问题是我无法将样式应用于ul。除非我将样式属性放在ul元素本身上，否则我没有尝试过任何工作。我已尝试使用scoped属性，但这也不起作用。在ul的类成为“elem_foo”时，它确实很奇怪。

Answer 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）我在<style scoped>标记内添加了<template>。

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文件中。

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

1 个答案: