<shared-properties-mixin>

Polymer mixin to enable property syncronization between different component instances through a transparent, zero-configuration shared store.

It extends PolymerElement's array and object mutation methods providing syncronization across all instances attached to the same store.

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

How to use it

Share a property between two instances of the same component:

<demo-component></demo-component>
<demo-component></demo-component>
<script>
  class DemoComponent extends SharedPropertiesMixin(Polymer.Element){
    static get properties(){
      return {
        prop: { 
          type: 'Number',
          value: 0,
          sharedStoreKey: 'commonProp' // <- The only config needed
        }
      }
    }
    static get template() {
      return Polymer.html`
        <h3>[[prop]]</h3>
        <button on-click="_increment">Increment</button>`;
    }
    _increment(){
      this.prop++;
    }
  }

  window.customElements.define('demo-component', DemoComponent);
</script>

Share a property between two instances of different components:

<demo-component2></demo-component2>
<demo-component3></demo-component3>

<script>
  class DemoComponent2 extends SharedPropertiesMixin(Polymer.Element){
    static get properties(){
      return {
        prop2: { 
          type: 'Number',
          value: 0,
          sharedStoreKey: 'foo' 
        }
      }
    }
    static get template() {
      return Polymer.html`
        <p>         
          [[prop2]] <button on-click="_increment">Increment!</button>
        </p>`;
    }
    _increment(){
      this.prop2++;
    }
  }

  class DemoComponent3 extends SharedPropertiesMixin(Polymer.Element){
    static get properties(){
      return {
        prop3: { 
          type: 'Number',
          value: 1, // <- Ignored because it have been previously defined
          sharedStoreKey: 'foo' // <- Same storeKey in different property
        }
      }
    }
    static get template() {
      return Polymer.html`
        <p>[[prop3]]</p>
        <button on-click="_increment">Increment!!</button>`;
    }
    _increment(){
      this.prop3++;
    }
  }

  window.customElements.define('demo-component2', DemoComponent2);
  window.customElements.define('demo-component3', DemoComponent3);
</script>

Dynamically share a new property:

<demo-component4></demo-component4>
<demo-component4></demo-component4>

<script>
  class DemoComponent4 extends SharedPropertiesMixin(Polymer.Element){
    constructor(){
      super();
      this.demo = 0;
      this.setSharedProperty('demo', 'dynamicallyAdded', 1);
    }
    static get template() {
      return Polymer.html`
        <p>         
          [[demo]] <button on-click="_increment">Increment!</button>
        </p>`;
    }
    _increment(){
      this.demo++;
    }
  }

  window.customElements.define('demo-component4', DemoComponent4);
</script>