假设我有一个自定义组件
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
其中引用的样式表有一个条目
ul .foo {
list-style-type: none;
}
问题是我无法将样式应用于 ul。除非我将 style 属性放在 ul 元素本身上，否则我尝试的任何方法都不起作用。我尝试过使用作用域属性，但这也不起作用。它做了一件奇怪的事情，ul 的类变成了“elem_foo”。
谢谢你的提问！我是这样做的：
在我的主要 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> tag.
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 文件中。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
