ポリマーカスタムプロパティは、ポリマーのリスト項目のための文書は、次のカスタムプロパティを指定

Question

を動作させるためにどのように：

を---paper項目に焦点を当てた-前にミックスインを適用：集中紙-項目{}

前

{}が既定値がないか、 "わからない"ということがわかりません。選択したアイテムの＃シャドウルートのスタイリングで次のものが見つかりました：

: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;; 
} 

これは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); 
    } 

したがって、--paper-item-focused-beforeのコンテンツが定義されているようです。とにかく、currentColorをインスペクタで目的の色に置き換えると、それは私がしたいことをします。私はそれを変更する恒久的な方法は--paper-item-focused-beforeを定義することです。私はこれをindex.htmlのCSSに追加しました：

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

これは動作しません。別のセレクターを使用するか、別の場所に置く必要がありますか？

Answer 1

@ a1626の答えは固定されています。私は実際に試してみました：前にrootが、それはコンポーネントによって指定されたCSSでした。私はindex.htmlの中のスタイルでそれを置くとき、それは動作します：

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

私は＃シャドウルートでインスペクタで得たもの。これは

: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; 
} 

これは--paper- a1626答え@サポートしていますitem-focused-beforeは空です。 @ a1626、あなたが質問に答えることを選んだら、私はそれを私の上で受け入れるでしょう。