Where to store dictionary data or function to be available in multiple Polymer elements?

Question

I'm using Polymer to build an application that presents a data table. Every cell in the table contains a coded value.

I want that every time a user clicks on a cell, the value gets translated to a more descriptive tag.

Example:

|       Page        | Response |
|-------------------|----------|
| example.com/one   |      200 |
| example.com/two   |      200 |
| example.com/three |      500 |
| example.com/four  |      301 |

Then I click on the 301:

|       Page        | Response |
|-------------------|----------|
| example.com/one   |      200 |
| example.com/two   |      200 |
| example.com/three |      500 |
| example.com/four  | Redirect |

The table is a webpage-list element that contains a dom-repeat template of paper-items wrapped in a row element I've called like webpage-item.

I am creating a different element for any type of cell (in the example: one response-field element, then another could be content-type-field and so on).

Except, my table has several coded columns and the dictionaries are huge.

Where should I store the dictionary? I guess an app-scoped (global) dictionary object would be instantiated for every single cell, resulting in a massive resource leak.

Is there a way to provide a "translator" element to be called by reference by every cell? And... is this the right path to take?

Another path I am considering is letting the dictionary on the server, and then make REST calls every time I need a translation. But then, I would still need a translator element to handle the caching.

Answer 1

The iron-meta element was built for this purpose. You can also build a custom more specialized element for this purpose. Each instance of iron-meta just provides access to a shared (static) container.