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-basefirst-class citizen ofcustom-buttonelement'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-buttonreflected on dom elements withinbutton-base.htmlautomatically.
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