默认样式和覆盖

Rosetta不为组件提供css的shadow功能

设置host的CSS

<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预处理程序

<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