How to style paper-card (Polymer 3) included inside a LitElement custom component using a mixin

Question

I created a custom element using LitElement in Polymer 3. I included a paper-card element inside that custom element. I would like to use the style mixins already defined to style that paper-card but I can't. For example, paper-card define this mixin:

--paper-card-header-text

https://www.webcomponents.org/element/@polymer/paper-card/elements/paper-card

I tried almost everything to use that mixin inside my custom element, but doesn't work. For example:

`paper-card{
      --paper-card-header-text:{
         color: blue;
      }
    }`

I also imported the mixin polyfill but nothing

`import @webcomponents/shadycss/entrypoints/apply-shim.js;`

I need help Thanks

I don't know why but Instead, you can change the color of header text with `paper-card { --paper-card-header-color:blue; }` — Cappittall, Dec 26 '18 at 18:14
Thanks, but my question is more related to how to use the style mixin as paper-card-header-color is not a mixin — Igor Gomez, Jan 07 '19 at 23:59

score 0 · Answer 1 · answered Feb 02 '19 at 20:36

To use the CSS mixin:

Import the Shady CSS ApplyShim in index.html:

<script src="./node_modules/@webcomponents/shadycss/apply-shim.min.js"></script>

In your custom element's render(), insert the CSS mixin in the <style> block:

class MyElement extends LitElement {
  render() {
    return html`
      <style>
        paper-card {
          --paper-card-header-text: {
            color: blue;
          };
        }
      </style>
      <paper-card>...</paper-card>
      `
  }
}

demo

score 0 · Answer 2 · answered Apr 30 '21 at 15:42

CSS mixins were used by Polymer, but don't work with Lit's adopted stylesheets. You can add a <style> to the template then run the apply styles script to it, but this is clunky and can result in a flash of unstyled DOM before it changes.

A better way with legacy Polymer is that the mixin CSS variables map to actual native CSS variables you can reference.

So, instead of:

css`
paper-card {
  --paper-card-header-text:{
    color: blue;
  }
}`

Call the underlying property of the mixin:

css`
paper-card {
  --paper-card-header-text_-_color: blue;
}`

However, in the specific case of the header colour <paper-card> also a direct variable:

css`
paper-card {
  --paper-card-header-color: blue;
}`

How to style paper-card (Polymer 3) included inside a LitElement custom component using a mixin

2 Answers2