CODEWITHSUNDEEP
javascriptangularjspolymer
Yohann Streibel
Yohann Streibel

Reputation: 113

How can I pass attribute to an imported hidden custom polymer element

Before I created my custom Polymer element :

<polymer-element name="my-custom-element" attributes="key" hidden>
  <script>
    Polymer({});
  </script>
</polymer-element>

I would like to pass an attribute to my imported hidden custom Polymer element when I import it on an other custom Polymer element like this :

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

How could I do ? It is possible to do this ? If not what is the good way ?

Upvotes: 2

Views: 328

Answers (3)

user1375895
user1375895

Reputation: 73

lets say this is you polymer file:

<polymer-element name="my-custom-element" attributes="key" hidden>
      <script>
        Polymer({});
      </script>
    </polymer-element>

and this is your link importing the file in your html:

<link rel="import" href="../my-custom-element/my-custom-element.html" key="15">

there's a couple of ways to do what you ask...

if you wish to create that value dynamically then the best way is to create a constructor for the custom element like this: 

<polymer-element name="my-custom-element" constructor='MyCustomElement' attributes="key" hidden>
          <script>
            Polymer({});
          </script>
        </polymer-element>

then create an instance of such element on the code of the polymer element, something like:

var custom =  new MyCustomElement();

place that element into your DOM like: 

var dom = document.querySelector('otherElement'); //depending on scope
dom.appendChild(custom);
custom.setAttribute('atribute', value);

or
this.$.elementID.appendChild(custom);
custom.setAttribute('atribute', value);

I hope this is somewhat what you're looking for. cheers

Upvotes: 0

robdodson
robdodson

Reputation: 6786

As wirlez pointed out, you'll want to import your element's definition, create an instance, and set the key value as an attribute.

For example:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <!-- import element definition from jsbin -->
    <link rel="import" href="http://jsbin.com/mojadu.html">
  </head>
  <body>
    <x-foo key="42"></x-foo>
  </body>
</html>

element definition

<!-- Make sure your element imports Polymer as a dependency -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="x-foo" attributes="key" hidden>
  <template>
    <h1>Hello from x-foo</h1>
    <h2>The key is {{key}}</h2>
  </template>
  <script>
    Polymer({
      keyChanged: function(oldVal, newVal) {
        console.log('the key is', newVal);
      }
    });
  </script>
</polymer-element>

Here's the example running in jsbin.

If you look in the console, you'll see the element is logging the value for key.

If you're trying to access the element using JavaScript in index.html you may need to wait for the polymer-ready event before manipulating it.

ex:

document.addEventListener('polymer-ready', function() {
  var el = document.querySelector('x-foo');
  // do something with x-foo that involves its key
});

Upvotes: 1

wirlez
wirlez

Reputation: 388

To pass a custom attribute you need a custom element. The tag "link" is no custom element. To create your own custom-elements and implement them to your web-application read this.

If you haven't already, follow the whole tutorial :)

Edit: An import of a custom element is not the same as using it. What you can do it that you import your custom element then write the tag with specific attributes.

<my-custom-element key="15"></my-custom-element>

Much like core-ajax is used:

<core-ajax
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></core-ajax>

It seems like you want to have it like this:

<link
    rel="import"
    href="../core-ajax/my-custom-element.html"
    auto
    url="http://gdata.youtube.com/feeds/api/videos/"
    params='{"alt":"json", "q":"chrome"}'
    handleAs="json"
    on-core-response="{{handleResponse}}"></link>

Sorry that is not how Polymer works!

Upvotes: 0

Related Questions