import - Polymer: re-using HTML snippet in an element -
i working on set of polymer elements (buttons in particular case) of should re-use same html snippet. structure custom button follows:
... <link rel="import" href="button-base.html" id="content"> <link rel="import" href="styles.html"> <link rel="import" href="behavior.html"> <dom-module id="dg-button"> <template> <style include="button-styles"></style> <!-- here want content of button-base.html --> </template> <script> polymer({ is: 'custom-button', behaviors: [dg.buttonbehavior] }); </script> </dom-module>
styles , behavior work should.
the problem is: not sure how content of button-base.html
specified place of local dom without defining button-base
yet element , using <button-base></button-base>
.
the reasons want avoid converting new element are:
- i want content of
button-base
first-class citizen ofcustom-button
element's local dom methods defined in behavior still apply usingthis.mymethod()
buttons not importbutton-base
, rather use custom local dom. - i need able declaratively set properties on new
custom-button
reflected on dom elements withinbutton-base.html
automatically.
for example, content of button-base.html
follows:
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/paper-button/paper-button.html"> <paper-button id="internalbutton" raised$="[[raised]]"> <span id="defaultcontent"> <content></content> </span> </paper-button>
i set raised
on custom-button
in way gets mapped paper-button
automatically without proxying of possible attributes through new element (in case define base-button
new element , import <base-button></base-button>
in custom-button
).
any ideas on how make import work?
Comments
Post a Comment