Search code examples
polymerweb-component

When using Polymer Web Components is it possible to bind data in the markup?


Let's say I have something like:

<code>
<polymer-element name'my-element'>
<template>
<div>{{label}}</div>
</template>
</polymer-element>
</code>

Would it be possible for me to simply declare my element this way:

<code>
<my-element label='name'></my-element>
</code>

What I'm doing doesn't seem to work. Is there a straightforward way to bind in the markup?


Solution

  • There are a few issues with what you posted, you are missing an '=' after 'name' in your polymer-element, and you have to either call Polymer to register my-element or include noscript attribute.

    In general, if you construct your question in JsBin (or similar) you can make sure you've resolved such issues which otherwise obscure the nature of your question.

    Bottom line is that you must make label a published property before Polymer will automatically connect it to attributes. You can make it published by including the name in the attributes attribute of the polymer-element, like this:

    <polymer-element name="my-element" attributes="label" noscript>

    http://jsbin.com/kizahi/1/edit

    <my-element label="name"></my-element>
    
    <polymer-element name="my-element" attributes="label" noscript>
    <template>
      <div>{{label}}</div>
    </template>
    </polymer-element>