How to pass the id of an html tag to a property of a polymer element?

I'm starting with this polymer and to start learning to create a Polymer2.0 app that serves as a kind of yellow pages.

1- I have this element guiame-app where the iron-pages are defined:

 <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="inicio" role="main">
     <guiame-inicio name="inicio"></guiame-inicio>
     <guiame-busq name="busqueda"></guiame-busq>
     <guiame-favs name="favs"></guiame-favs>
     <guiame-item name="item"></guiame-item>
     <guiame-g404 name="g404"></guiame-g404>
    </iron-pages>

2- A second element guiame-inicio that has a list of "shortcuts" or emergencies:

    <div class="card">
      <paper-icon-item>
        <a href="item" id="Bomberos">
          <iron-icon id="bomb" icon="guiaIcons:whatshot" item-icon></iron-icon> Bomberos</paper-icon-item></a>
      <paper-icon-item>
        <a href="item" id="Farmacias">
        <iron-icon id="farm" icon="guiaIcons:local-hospital" item-icon> </iron-icon> Farmacias</paper-icon-item></a>
      <paper-icon-item>
        <a href="item" id="Policia">
        <iron-icon id="poli" icon="guiaIcons:local-taxi" item-icon> </iron-icon> Policia</paper-icon-item></a>
      <paper-icon-item>
        <a href="item" id="Hospital">
        <iron-icon id="hosp" icon="guiaIcons:local-pharmacy" item-icon> </iron-icon> Hospital</paper-icon-item></a>
      <paper-icon-item>
        <a href="item" id="Estado">
        <iron-icon id="est" icon="guiaIcons:location-city" item-icon> </iron-icon> Org. Estatales</paper-icon-item></a>
    </div>

3- Finally a guiame-item detailed view element that brings the data from a JSON file and shows (should show) the selected item by clicking on the link of the previous element:

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">

<link rel="import" href="../src/guiame-icons.html">

<dom-module id="guiame-item">

    <template >
        <style>
         :host {
            display: block;

            padding: 16px;
        }
    </style>

    <iron-ajax auto url="../assets/emer.json" handle-as="json" last-response="{{data}}"></iron-ajax>

    <template is="dom-repeat" items="[[data]]">

        <iron-image src="[[item.imagen]]" sizing="cover" alt="[[item.imgAlt]]"></iron-image>
        <h1>[[item.nomb]]</h1>

        <paper-item>Dirección: [[item.dire]]</paper-item>

<!--itera por todos las ocurrencias del array tel -->
        <template is="dom-repeat" items="[[item.tel]]">
            <paper-button raised>
                <iron-icon icon="guiaIcons:phone"></iron-icon>[[item]]</paper-button>
            <p></p> 
        </template>
    </template>

</template>

<script>

    class guiameItem extends Polymer.Element {
        static get is() {
            return 'guiame-item';
        }
        static get properties() {
            return {
                id: {
                    type: String,
                    notify: true,
                },
            };
        }

    }
        customElements.define(guiameItem.is, guiameItem);
    </script>

</dom-module>

All this data flow works (shows data from the hospital, fire department, police, etc.) except that I can not filter the list of the JSON file and show only the item where the guiame-inicio was clicked on.

How can I make the tag id in guiame-inicio become a property of the element guiame-item and therefore bring only the information of that object in the JSON file? From now on I thank you for what you can provide as a solution to this.