CSS style API for polymer

Question

I came up with the following to change the style of the web component with:

• custom properties in CSS
• declaratively in the HTML tag
• programmatically by changing properties

My solution uses properties that automatically change CSS custom properties. It looks like this:

<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>

Then you can either style in CSS:

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

via HTML:

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

or javascript:

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

Adding a new CSS property to the API means adding the following lines:

• property definition
• observer code to pass the property name _styleChanged()
• setting a CSS property to a custom CSS property

I don’t think that in Polymer you can specify a variable or constant with a function passed to the observer, so this requires a second point.

API- CSS Polymer? , ?

Answer 1

; . , , polyfill, / -.

API - "" CSS. , Polymer shady dom, shadow dom, .

CSS .