カスタムコンポーネントの外に用紙入力コンテナ（ポリマーミックスイン）スタイルを設定するにはどうすればよいですか？

Question

私たちは入力ボックスの境界線をすべて囲むことができるように紙の入力コンテナのスタイルをオフにしようとしています。

--paper入力-コンテナ下線--paper-入力 - ：カスタムのポリマー成分で

、私たちがして、カスタムポリマー成分スタイルセクションで、次のミックスインを無効にしたいものを得ることができましたコンテナの下線を引く

しかし、同じスタイルのセクションをhtmlにコピーして紙の入力コンテナを使用すると、取り込まれません。これらのミックスインをカスタムポリマーコンポーネントの外に適用する方法はありますか？私のCSS構文が間違っていると推測しています。

<style> 
    paper-input-container{ 
     --paper-input-container-underline: {visibility: hidden}; 
     --paper-input-container-underline-focused: {visibility: hidden}; 
    } 
</style> 

ありがとうございました！

Answer 1

私はあなたがindex.html ...

ファーストにスタイルを移動する意味と仮定し、彼らがcustom-style Sにいるとき、index.htmlからCSSのミックスインとプロパティは、ポリマーのみで適用されます。

<style is="custom-style"> 
    ... 
</style> 

セカンドpaper-input-containerだけが動作しないため、CSSセレクタをpaper-input-containerに設定する必要があります。あなたはx-foo要素にのみpaper-input-container Sをターゲットにしたい場合は、次のように記述します。

x-foo { 
    --paper-input-container-underline: {visibility: hidden}; 
    --paper-input-container-underline-focused: {visibility: hidden}; 
} 

codepen

それとも、任意の要素内のすべてのpaper-input-container Sをターゲットにしたい場合は、あなたが:root（非推奨を使用したいが）、またはあなたのセレクタとしてhtml：

html { 
    --paper-input-container-underline: {visibility: hidden}; 
    --paper-input-container-underline-focused: {visibility: hidden}; 
} 

codepen