javascript – Polymer的CSS样式API

我想出了以下内容来修改web组件的样式：

> CSS中的自定义属性
>在HTML标记中以声明方式
>以编程方式更改属性

我的解决方案使用自动修改CSS自定义属性的属性.
它看起来如下：

<link rel="import" href="../../bower_components/polymer/polymer.html"/>

<dom-module id="my-bar">
    <template>

        <style>
            :host {
                display: block;
                Box-sizing: border-Box;
                height: var(--my-bar-bar-height,50%);
                opacity: var(--my-bar-bar-opacity,0.8);                
                border: var(--my-bar-bar-border,1px solid black);
                width: 100%;
            }

            div {
                background-color: var(--my-bar-bar-color,blue);
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

        <div id="bar"></div>
    </template>


    <script>
        polymer({
            is: 'my-bar',properties: {
                barColor: {
                    type: String,observer: '_colorChanged'
                },barHeight: {
                    type: String,observer: '_heightChanged'
                },barOpacity: {
                    type: String,observer: '_opacityChanged'
                },barBorder: {
                    type: String,observer: '_borderChanged'
                }
            },_heightChanged: function () {
                this._styleChanged("barHeight");
            },_colorChanged: function () {
                this._styleChanged("barColor");
            },_opacityChanged: function () {
                this._styleChanged("barOpacity");
            },_borderChanged: function () {
                this._styleChanged("barBorder");
            },_styleChanged: function(name) {
                // update the style dynamically,will be something like:
                // this.customStyle['--my-bar-bar-color'] = 'red';
                this.customStyle[this._getCsspropertyName(name)] = this[name];
                this.updateStyles();
            },_getCsspropertyName: function(name) {
                // retrieves the CSS custom property from the polymer property name
                var ret = "--" + this.is + "-";
                var char = "";
                for(i = 0; i < name.length; i++)
                {
                    char = name.charat(i);
                    if(char >= 'A' && char <= 'Z') {
                        ret += "-" + char.toLowerCase();
                    }
                    else {
                        ret += char;
                    }
                }
                return ret;
            }
        });
    </script>
</dom-module>

然后你可以在CSS中设置样式：

my-bar {
    --my-bar-bar-color: gray;
}

通过HTML：

<my-bar bar-height="20%" bar-opacity="0.1" bar-border="2px solid black"></my-bar>

或JavaScript：

this.$.my-bar.barHeight = "20%;

向API添加新的CSS属性意味着添加以下行：

>属性定义
>将属性名称传递给_styleChanged()的观察者代码
>将CSS属性设置为CSS自定义属性

我不认为在polymer中你可以使用传递给观察者的函数指定变量或常量,这就是为什么第二点是必要的.

有没有更好的方法为polymer创建CSS样式API？
我可以做的任何改进或简化？

解决方法

我建议不要这样做;它可能与以后的版本不兼容.希望它不会,因为聚合物在很多方面都是填充物,直到浏览器自己采用/实现Web组件.

custom property API的目的是“近似”CSS variable spec.这是必需的,因为polymer使用shady dom,而不是真正的shadow dom,即not widely supported.

我建议坚持使用CSS变量规范进行样式设计.