I am trying to control the attribute value of webcomponent from polymer paper input.
I am able to change values with two binding of paper input but not able to control the attribute value
I created below example and trying to change resizable-panels attribute to vertical
<resizable-panels [[text]]>
to
<resizable-panels vertical>
using paper-input
Codepen code for reference https://codepen.io/nagasai/pen/QMjjQw
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="resizable-panels/resizable-panels.html">
<link rel="import" href="paper-input/paper-input.html"
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
.p1 { background-color: #673AB7; }
.p2 { background-color: #E91E63; }
.p3 { background-color: #00BCD4; }
.p4 { background-color: #FB8C00; }
.p5 { background-color: #607D8B; }
.p6 { background-color: #4CAF50; }
</style>
<paper-input value="{{text::input}}"></paper-input>
<resizable-panels id="rp-2">
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p2">Second panel</div>
</resizable-panels>
<br>
<resizable-panels [[text]]>
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p1">Second panel</div>
<div class="panel p1">Third panel</div>
</resizable-panels>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
Thats not how its supposed to work, you cant just slap a tag like and expect this to work - since this is not server side building - you are not supposed to treat your templates like this.
Here is a working demo: https://codepen.io/anon/pen/rzOgQX
You should be toggling a boolean property
verticalbetween true/false to archieve what you want. Hope this helps.