默认样式和覆盖
Rosetta不为组件提供css的shadow功能
设置host的CSS
- 使用伪类选择器:host作为根节点的选择器
- 支持less、sass这类预处理程序
<element name="r-slider">
<style>
:host div {
color: red;
}
</style>
<template>
<div>
{text}
</div>
</template>
<script type="text/javascript">
Rosetta({
is: 'r-slider',
properties: {
text: {
type: String,
value: '测试'
}
}
})
</script>
</element>
声明CSS外链依赖
<element name="r-a">
<style>
:host div {
color: red;
}
</style>
<template>
<link rel="stylesheet" type="text/css" href="a.css">
<div>
{text}
</div>
</template>
<script type="text/javascript">
Rosetta({
is: 'r-a',
properties: {
text: {
type: String,
value: '测试'
}
}
})
</script>
</element>
css预处理程序
- 支持预处理程序
- style上需要标识出所用的预处理程序,
type="text/x-less"
或者type="text/x-sass"
<element name="r-a">
<style type="text/x-less">
:host {
div {
color: green;
span {
color: red;
}
}
}
</style>
<template>
<link rel="stylesheet" type="text/css" href="a.css">
<div>
测试一下
<span>
{text}
</span>
</div>
</template>
<script type="text/javascript">
Rosetta({
is: 'r-a',
properties: {
text: {
type: String,
value: '测试'
}
}
})
</script>
</element>
发现了问题或想要贡献?来 Github 和Rosetta联系或者Fork吧!: /docs/guide/style.md