CODEWITHSUNDEEP
polymerpolymer-1.0
nicholaswmin
nicholaswmin

Reputation: 22949

Propagating CSS variables in composited elements

I've got an element (the host) that includes another element (the child).

How can I propagate the value of a CSS variable from the host to the child when the CSS variable is set on the host?

Example:

<!-- 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>

And ideally I'd be able to use it like so:

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

<host-element><host-element>

Upvotes: 0

Views: 365

Answers (1)

Sohaib
Sohaib

Reputation: 11297

Seems to be working(chrome), run the code snippet below

<!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>

Upvotes: 1

Related Questions