how to send params to polymer element

[ssch...@gmail.com]

hello, i am trying to send parameters to a polymer element and i just cannot find a working example on how to use data-* parameters properly. 

this is what i am trying: 

<?php

$config = array(); 

$config['search_ic'] = $params->get('search_input_class', ''); 

$config['placeholder'] = $search;

$config['myid'] = $myid;

$keyword = $keyword = JRequest::getVar('keyword'); 

    $config['keyword'] = $keyword;

$config['noajax'] = (bool)$no_ajax;

$config['number_of_products'] = $params->get('number_of_products', '');

    $config['clang'] = $clang; 

$config['url'] = $url; 

$config['order_by'] = $params->get('order_by'); 

?>

<ajaxsearch-app data-params="<?php echo htmlentities(json_encode($params)); ?>"/><ajaxsearch-app>

and within the element definition (ajaxsearch-app.html): 

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="ajaxsearch-app">

<dom-module id="ajaxsearch-app">

  <template>

    <style>

    </style>

    <input placeholder="[[dataParams.placeholder]]" class="inputbox_vm_ajax_search_search_str2 span2 inactive_search " id="vm_ajax_search_search_str2[[dataset.myid]]" name="keyword" type="search" value="[[dataset.keyword]]" autocomplete="off" 

   onblur="javascript: return search_setText('', this, '[[dataset.myid]]');" onfocus="javascript: aj_inputclear(this, '[[dataset.number_of_products]]', '[[dataset.clang]]', '[[dataset.myid]]', '[[dataset.url]]');" onkeyup="javascript:search_vm_ajax_live(this, '[[dataset.number_of_products]]', '[[dataset.clang]]', '[[dataset.myid]]', '[[dataset.url]]', '[[dataset.order_by']]); "  />

 </template>

  <script>

    /**

     * @customElement

     * @polymer

     */

    class AjaxsearchApp extends Polymer.Element {

ready() {

       super.ready();

      this.addEventListener('keypress', e => this.handlePress(e));

    }

handlePress(e) {

console.log('press'); 

}

      static get is() { return 'ajaxsearch-app'; }

  static get ready() {

   console.log('ready'); 

  }

      static get properties() {

        return {

          prop1: {

            type: String,

            value: 'ajaxsearch-app'

          },

  params: {

     type: Object,

value: {}

  },

        };

      }

    }

    window.customElements.define(AjaxsearchApp.is, AjaxsearchApp);

  </script>

</dom-module>

can anyone point me to a documentation or provide a full example of the element definition and element usage which got both "data-*" definition and also uses the parameters within the html of the element ? any search in google for polymer2 ends up at polymer 1 and clicking absolete api link points to a frontpage instead of the same topic in the documentation. the documentation only provides partial examples and thus it's not possible to understand the whole picture. 

my goal is to use polymer as compatiblity library for shadow dom usage. 

any advise is appreciated,

thank you very much. 

stan

[ssch...@gmail.com]

ok, i am replying to myself as a bit of debugging did this and if any newbie comes here it will be much easier to find out: 

<dom-module id="ajaxsearch-app">

  <template>

    <style>

    </style>

<input placeholder="[[params.placeholder]]" class="inputbox_vm_ajax_search_search_str2 span2 inactive_search " id="vm_ajax_search_search_str2[[params.myid]]" name="keyword" type="search" value="[[params.keyword]]" autocomplete="off" />

</template>

  <script>

    /**

     * @customElement

     * @polymer

     */

    class AjaxsearchApp extends Polymer.Element {

ready() {

       super.ready();

      this.addEventListener('keyup', e => this.handlePress(e));

  this.addEventListener('focus', e => this.handOnFocus(e));

  console.log('ready'); 

  

  console.log(this.params); 

    }

handlePress(e) {

search_vm_ajax_live(this, this.params.number_of_products, this.params.clang, this.params.myid, this.params.url, this.params.order_by)

}

handOnFocus(e) {

search_vm_ajax_live(this, this.params.number_of_products, this.params.clang, this.params.myid, this.params.url, this.params.order_by)

}

      static get is() { return 'ajaxsearch-app'; }

  

      static get properties() {

        return {

          prop1: {

            type: String,

            value: 'ajaxsearch-app'

          },

  params: {

     type: Object,

value: {}

  },

        };

      }

    }

    window.customElements.define(AjaxsearchApp.is, AjaxsearchApp);

  </script>

</dom-module>

if there is a more minimalistic approach i will be glad to learn more. 

best regards, stan