I´m a polymer beginner. I´ve installed Polymer v1.7, and i´m trying to build a simple form. In my application tried to put a paper-input, but is not displayed at all. Checking the DOM, noticed the element is there, but is not rendered. And, in the console some paper related messages are shown. I´ve decided to build a completely new basic project just for testing that single element, but again, the element is not working and the messages persist.
My current code is:
bower.json
{
"name": "test001",
"main": "index.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.10",
"iron-form": "PolymerElements/iron-form#^1.1.4",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.7"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
test001-app:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input">
<dom-module id="test001-app">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]]</h2>
<paper-input label="Etiqueta"></paper-input>
</template>
<script>
Polymer({
is: 'test001-app',
properties: {
prop1: {
type: String,
value: 'test001-app',
},
},
});
</script>
</dom-module>
console messages:
Behavior Polymer.IronA11yKeysBehavior not found when mixing properties into paper-input! docs.js:126
Behavior Polymer.IronFormElementBehavior not found when mixing properties into paper-input! docs.js:126
Behavior Polymer.IronFormElementBehavior not found when mixing properties into paper-textarea! docs.js:126
Behavior Polymer.IronA11yKeysBehavior not found when mixing properties into Polymer.PaperInputBehavior!
I tried putting some content between open and close paper tag (ie: abc) and is displayed, but not as input element (just as a basic text)
Your HTML import for <paper-input>
is incorrect:
<!-- wrong -->
<link rel="import" href="../../bower_components/paper-input">
It should be:
<link rel="import" href="../../bower_components/paper-input/paper-input.html">