在 Polymer 2.0 中使用 updateStyles 仅适用于 webcomponents-lite

Question

使用 webcomponents-lite 时 this.updateStyles 按预期工作。但是在不需要它的浏览器上我不想加载它。

this.updateStyles 应该在没有 webcomponents-lite 的情况下工作吗？

非工作版本示例： http://codepen.io/daKmoR/pen/dNPdya

class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get config() {
        return {
            properties: {
                width: {
                    type: String,
                    reflectToAttribute: true,
                    observer: '_onWidthChange'
                }
            }
        };
    }

    constructor() {
        super();
    }

    _onWidthChange(newValue, oldValue) {
        console.log('setting width');
        this.updateStyles({'--width': newValue});
    }

}
customElements.define(XFoo.is, XFoo);

使用自己的 updateStyles 的解决方法示例： http://codepen.io/daKmoR/pen/ggbeaR

class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get config() {
        return {
            properties: {
                width: {
                    type: String,
                    reflectToAttribute: true,
                    observer: '_onWidthChange'
                }
            }
        };
    }

    constructor() {
        super();
    }

    _onWidthChange(newValue, oldValue) {
        console.log('setting width');
        this.updateStyles({'--width': newValue});
    }

    updateStyles(obj) {
        if (obj === undefined) {
            return;
        }
        var str = '';
        for (var p in obj) {
            if (obj.hasOwnProperty(p)) {
                str += p + ': ' + obj[p] + ';';
            }
        }
        this.style = str;
    }    

}
customElements.define(XFoo.is, XFoo);

有"better"方法吗？

Answer 1

因为我需要使用 CSS 自定义属性支持内联样式，即使对于 IE11、IE Edge，我也为它创建了自己的行为。

简而言之：

为样式和数据样式编写内联样式（因为样式会删除 IE11、IE Edge 中的所有未知属性）
读取数据样式并使用 ShadyCSS.updateStyles

你可以在这里查看 https://www.webcomponents.org/element/daKmoR/grain-update-inline-style-behavior

在 Polymer 2.0 中使用 updateStyles 仅适用于 webcomponents-lite

Using updateStyles in Polymer 2.0 only works with webcomponents-lite

polymer-2.x