javascript - Why doesn't Polymer insert the content? -
i'm trying understand web components, want create web component "wrap" select tag select2.
here's main html:
<html> <head> <title>web components</title> <meta charset="utf-8"></meta> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="elements/select2-select.html"></link> </head> <body> <div> <select2-select> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> </select2-select> </div> </body> </html> and custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"></link> <polymer-element name="select2-select"> <template> <select id="main"> <content></content> </select> </template> <script>polymer({});</script> </polymer-element> the problem is, option tags aren't being inserted in shadow dom:
what doing wrong? i'm running firefox on ubuntu 14.04.2, if it's anyhow relevant.
thank much.
yeah happens, easiest way around use attributes. i've amended original script make work.
main html:
<html> <head> <title>web components</title> <meta charset="utf-8"></meta> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="elements/select2-select.html"></link> </head> <body> <div> <select2-select options='[ {"value":"1","text":"1"}, {"value":"2","text":"2"}, {"value":"3","text":"3"}, {"value":"4","text":"4"} ]'></select2-select> </div> </body> </html> custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="select2-select" attributes="options"> <template> <select id="main"> <template repeat="{{option in options}}"> <option value={{option.value}}>{{option.text}}</option> </template> </select> </template> <script> polymer('select2-select', { publish: { options: {}, } }); </script> </polymer-element>
Comments
Post a Comment