3

假设我有一个自定义组件

<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”时，它做了一件奇怪的事情。

4

1 回答 1

3

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

在我的主要 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 文件中。

于 2013-05-03T04:43:17.887 回答