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 ?
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
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments