custom-style causing issues with @angular2-material library

[jaichandra]

In apps which already use @angular2-material library, using polymer elements with angular2-polymer breaks material library css styles.

below line is causing issue:

PolymerDomAdapter.prototype.createStyleElement = function (css, doc) {
        if (doc === void 0) { doc = document; }
        var style = doc.createElement.call(doc, 'style', 'custom-style');
        this.appendChild(style, this.createTextNode(css));
        return style;
    };

Because the above code uses prototype and overrides the default createStyleElement function, it causes all styles to be converted to <style is="custom=style"> tags, thus breaking existing material library styles. Is there a work around for this?

[Saulis]

Can't see any workarounds – this function should probably be refined a bit to create custom-style elements only when css has Polymer css mixins or properties present.

[Splaktar]

I have been seeing issues with material2 styles and it looks like this is the culprit. It's unfortunate that this is still sitting here unassigned :(

@Saulis Do you know how to detect if the css "has Polymer css mixins or properties present"? I'm guessing that this would need something more than just looking for @apply and CSS Variables? But wouldn't inspecting all of the contents of the style element come at a performance cost?

We've had to re-declare our material2 styles inside of Angular components to get them to work again. It's pretty ugly.

[Splaktar]

Actually, I debugged my issues further and with or without the is="custom-style" there was no change in behavior or Material2 styles. I found that I needed to configure Material2's new theming system for my app. After that, everything is working as expected with styling.

[jaichandra]

@splaktar can you share some details on how you configured material theming system to get it to work with polymer? Would be very helpful.

[logvi]

The same issue for me. Can you please describe how to solve it?

[Splaktar]

@jaichandra @logvi you can see the repo here and I have a blog post about upgrading from Angular 2 RC.4 and getting this working again here.

[logvi]

@Splaktar Hm, it doesn't help me :(. I added custom theme but styles still overwritten by is="custom-style"

[Splaktar]

@logvi the styles aren't overwritten, they just get the is="custom-style" attribute added to them. It doesn't break anything for me. What problem are you seeing exactly?