insertRule('body /deep/ myclass' + ' {' + cssText + '}', index); throws error in ff and ie

[TimWillis]

I wrote this behavior for adding themes but when I use the /deep/ combinator for the var selectorText it thows an error :

var css_style = {
    style_sheet_utility: function () {
        return {
            create_style_sheet: function (href) {
                if (typeof href !== 'undefined') {
                    var element: any = document.createElement('link');
                    element.type = 'text/css';
                    element.rel = 'stylesheet';
                    element.href = href;
                }
                else {
                    var element: any = document.createElement('style');
                    element.type = 'text/css';
                }

                document.getElementsByTagName('head')[0].appendChild(element);
                var sheet: any = document.styleSheets[document.styleSheets.length - 1];

                if (typeof sheet.addRule === 'undefined')
                    sheet.addRule = this.add_rule;

                if (typeof sheet.removeRule === 'undefined')
                    sheet.removeRule = sheet.deleteRule;

                return sheet;
            },

            add_rule: function (selectorText, cssText, index) { 
                if (typeof index === 'undefined')
                    index = this.cssRules.length;

                this.insertRule(selectorText + ' {' + cssText + '}', index);
            }
        }; 
    }
};

SyntaxError: An invalid or illegal string was specified
this.insertRule(selectorText + ' {' + cssText + '}', index);

[sorvell]

The /deep/ combinator is only supported in Chrome. It is also being deprecated in the Shadow DOM spec and may be removed from Chrome at some point in the future. For that reason, we strongly recommend avoiding use of both /deep/ and ::shadow and will be deprecating any support of those combinators going forward.

One of the new concepts introduced with Web Components is style encapsulation. This is intended to allow users to control what css applies to a given element. Since theming is fundamentally a global notion, it is somewhat in tension with the desire to encapsulate. To allow for theming, elements should define a styling api which exposes the parts that can be themed.

To facilitate this, Polymer has implemented a shim for custom style properties which is the supported way to theme elements (see https://www.polymer-project.org/1.0/docs/devguide/styling.html).

We plan to add better support for dynamically changing custom style properties at runtime (#1879).

[TimWillis]

Thank you for the explanation!