Polymer2: how to share data from parent to deeply nested component?

Question

I am wondering what would be the best idea in case of passing data from parent component to deeply nested component while is use Polymer2.

For example,

    <a some-prop="1">
      <b>
        <c>
          <d>
            <e></e>
          </d>
        </c>
      </b>
    </a>

I'd like to pass some-prop from a to e.

To solve this issue, I have a couple of ideas:

• Singleton service: Such as AngularJs or Angular2.x. But Polymer doesn't provide singleton service by default.

• Flux pattern: Like Redux, Vuex. But my app is not complex enough to use this pattern. Plus has to implement this pattern by using Polymer.

• e does NOT use some-prop and just fire an event from e and a will handle whatever I want: By doing this, there won't be need passing some-prop.

What would be the best way to handle this situation?

How Polymer is designed to share data between components?

Thanks.

Answer 1

You can pass the data between elements or child elements very easy: Here an example:

Demo:

  <dom-module id="x-foo">
    <template>
         <a-a some-prop="{{someProp}}">
          <b-b>
            <c-c>
              <d-d>
                <e-e some-prop={{someProp}}>
                </e-e>
              </d-d>
            </c-c>
          </b-b>
        </a-a>
    </template>
  </dom-module>

• Remember: custom elements should be named with min two char with dash-separated.