合成された要素のCSS変数の伝播

私は、別の要素（子）を含む要素（ホスト）を持っています。合成された要素のCSS変数の伝播

CSS変数がホストに設定されている場合、CSS変数の値をホストから子に伝播するにはどうすればよいですか？

例：

<!-- Host Element, includes <child-element> --> 

<dom-module id="host-element"> 
    <template> 
    <style> 
     child-element { 
     --button-color: var(--menu-button-color); 
     } 
    </style> 

    <child-element><child-element> 
    </template> 
</dom-module> 

<!-- Child Element, is declared within <host-element> --> 

<dom-module id="child-element"> 
    <template> 
    <style> 
     button { 
     color: var(--button-color); 
     } 
    </style> 

    <button> I should be a red button </button> 
    </template> 
</dom-module>

、理想的には、私はそうのようにそれを使用することができるだろう：

<style> 
    host-element { 
    --menu-button-color: red; 
    } 
</style> 

<host-element><host-element>

出典

2017-06-22 Nicholas Kyriakides

css変数はスコープ付き変数のように動作します。したがって、あなたのコードはそのまま動作しません。デフォルト値を1つの代替として使用できます。 – a1626

@ a1626これが当てはまる場合、スコープを越えたこのタイプの値伝播は、ほぼあらゆるプログラミングコンテキストで意味的に正しいので、ちょっと変わった動作です。 *デフォルト値*はどういう意味ですか？答えでそれを拡張してもよろしいですか？ –

私が言っていたことは、継承のルールを使用して、同じまたは親のスコープで動作するように定義されていなければならないということでした（ポリポリ化されているので常にPolymerで動作するとは限りません）。デフォルト値は 'color：var（ - button-color、var（ - default-color））'のようなものを意味します。このように 'button-color'は定義されていません。。ポリマーチームがスタンドアロン要素のデフォルト値を定義するために使用した多くの「材料」デフォルト変数もあります。 – a1626

は（クローム）を動作しているようだ、

以下のコードを実行します

<!doctype html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+1.7.1/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    
 
    <script> 
 
    // Setup Polymer options 
 
    window.Polymer = { 
 
     dom: 'shadow' 
 
    }; 
 
    </script> 
 
    
 
    <link rel="import" href="polymer/polymer.html"> 
 
</head> 
 

 
<style is="custom-style"> 
 
    host-elem { 
 
    --menu-button-color: red; 
 
    } 
 
</style> 
 

 
<body> 
 
    
 
    <host-elem></host-elem> 
 
    
 
    <!-- Host Element, includes <child-element> --> 
 
    <dom-module id="host-elem"> 
 
    <template> 
 
     <style> 
 
     child-elem { 
 
      --button-color: var(--menu-button-color); 
 
     } 
 
     </style> 
 
    
 
     <child-elem><child-elem> 
 
    </template>  
 
    <script> 
 
    Polymer({ is: 'host-elem'}); 
 
    </script> 
 
    </dom-module> 
 

 
    
 
    <!-- Child Element, is declared within <host-element> --> 
 
    <dom-module id="child-elem"> 
 
    <template> 
 
     <style> 
 
     button { 
 
      color: var(--button-color); 
 
     } 
 
     </style> 
 
      
 
     <button>I should be a red button </button> 
 
    </template> 
 
    <script> 
 
    Polymer({ is: 'child-elem'}); 
 
    </script> 
 
    </dom-module>  
 
      
 
     
 
</body>

出典

2017-06-22 22:11:50 Sohaib

奇妙なことに言えば奇妙です。私は自分のコードが何であるかを再確認し、これに戻ります。 –

合成された要素のCSS変数の伝播

例：

、理想的には、私はそうのようにそれを使用することができるだろう：

答えて

関連する問題