CODEWITHSUNDEEP
csspolymerangular-dart
curt
curt

Reputation: 4592

How to Get Polymer Custom Properties to Work

The document for the Polymer list-item specifies the following custom property:

--paper-item-focused-before Mixin applied to :before focused paper-items {}

I'm not sure if the {} means there is no default or "we aren't telling you. The reason I say that it that I found the following in the #shadow-root styling for the selected item:

:host(:focus):before, .paper-item:focus:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

    background: currentColor;
    content: '';
    opacity: 0.12;
    pointer-events: none;;
}

and this in paper-item-shared-style.html

      :host(:focus):before, .paper-item:focus:before {
    @apply(--layout-fit);

    background: currentColor;
    content: '';
    opacity: var(--dark-divider-opacity);
    pointer-events: none;

    @apply(--paper-item-focused-before);
  }

So it seems content is being defined for --paper-item-focused-before. Anyway, if I replace currentColor with my desired color in the inspector, it does what I want. I assume the permanent way to change it is to define --paper-item-focused-before. I added this to css in index.html:

  <style is="custom-style">
  :host {
    --paper-item-focused-before: {
      background-color: #293040
    }
  }
...
</style>

It doesn't work. Do I have to use a different selector or put in in a different location?

Upvotes: 0

Views: 174

Answers (1)

curt
curt

Reputation: 4592

@a1626's answer is what fixed it. I had actually tried :root before, but it was the css specified by the component. It works when I put it in style in index.html:

<style is="custom-style">
  :root {
    --paper-item-focused-before: {
      background-color: #293040
    }
}
...
</style>

This what I got in the inspector in the #shadow-root

:host(:focus):before, .paper-item:focus:before {
  position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

    background: currentColor;
    content: '';
    opacity: 0.12;
    pointer-events: none;background-color: #293040;
}

This supports @a1626 answer that --paper-item-focused-before is empty. @a1626, if you choose to answer the question, I'll accept it over mine.

Upvotes: 0

Related Questions