search

platosha / angular-polymer

Angular 2 support for Polymer elements
https://www.npmjs.com/package/angular-polymer
Apache License 2.0
220 stars 44 forks source link

Renderer does not support styles inside angular component #143

Closed BorntraegerMarc closed 7 years ago

BorntraegerMarc commented 7 years ago

So, I just droped in the new renderer and got this (left is before and right is after): image

So functionality is working perfectly but CSS is not the same. I noticed that the following doesn't work: css:

paper-item-body {
    width: 80%;
    margin-left: 5%;
    color: var(--komed-color-white);
    font-size: 14px;
    font-weight: 900;
    @apply(--mixin-default);
    min-height: 0;

    --paper-item-body-secondary: {
        font-size: 13px;
        color: var(--komed-color-gray);
    }
}

html:

<iron-selector #roomselector id="patient-list">
    <paper-item class="patient-list-item" id="patient-list-item" raised toggles role="menuitem">
        <iron-icon icon="social:person"></iron-icon>
        <paper-item-body id="item-body" two-line [ngClass]="{'selected': selected }">
            <div>something</div>
            <div secondary>else</div>
        </paper-item-body>
        <paper-ripple></paper-ripple>
    </paper-item>
</iron-selector>

Here the paper-item-body will not have any of the css attributes

platosha commented 7 years ago

WIP in branch https://github.com/platosha/angular-polymer/tree/feature/renderer-styling