polymer-1.0 | 易学教程

paper-input autocomplete fails to fill

阅读更多关于 paper-input autocomplete fails to fill

Polymer 1.0 Chrome 50.0.2661.102 I am trying to enable chrome autofill with paper input. When selecting either input the standard appropriate chrome autofill prompt list appears, however selecting an available name, or email from the list does not populate the input, it just closes the chrome autofill list. <paper-input id="email" name="email" label="Email" type="email" autocomplete="email" ></paper-input> <paper-input id="password" name="password" label="Password" type="password" autocomplete="current-password" ></paper-input> Try wrapping your inputs in form tags without attributes. Like

How to use commas in a CSS variable fallback?

阅读更多关于 How to use commas in a CSS variable fallback?

How can one use commas in the fallback value of a CSS variable? E.g. this is fine: var(--color, #f00) , but this is weird var(--font-body, Verdana, sans-serif) . The idea is to be able to set a font-family using a variable with a fallback value of say Verdana, sans-serif . Edit: This actually works pretty well for browsers that support CSS properties, but the issue seems to come from Google Polymer's polyfills. For future reference, I ended up using variables for both the font and the font family fallback like so (seems to be the cleanest way of doing it for now): font-family: var(--font-body,

Double Brackets [[ ]] vs Double Braces {{ }} in Polymer

阅读更多关于 Double Brackets [[ ]] vs Double Braces {{ }} in Polymer

What's a succinct way to explain the difference between double brackets ( [[...]] ) and double braces ( {{...}} ) in Polymer 1.0? For instance, in the documentation for the <iron-list> element the sample HTML shows: <template is="dom-bind"> <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax> <iron-list items="[[data]]" as="item"> <template> <div> Name: <span>[[item.name]]</span> </div> </template> </iron-list> </template> Why is data bounded by double braces in one spot ( last-response="{{data}}" ) but bounded by double brackets ( items="[[data]]" ) in another spot?

How to install Polymer 1.x templates with polymer-cli

阅读更多关于 How to install Polymer 1.x templates with polymer-cli

When I run polymer init , it only shows V2 templates, but I want V1. How do I install Polymer 1.x application/element templates? There's a pending issue ( polymer-cli Issue #804 ) to restore the 1.x templates. In the meantime, you can manually install them with: npm i -g justinfagnani/generator-polymer-init-polymer-1-element \ justinfagnani/generator-polymer-init-polymer-1-application This will allow the 1.x templates to be listed when running polymer init . 来源： https://stackoverflow.com/questions/50042699/how-to-install-polymer-1-x-templates-with-polymer-cli

How to querySelector elements of an element's DOM using Polymer

阅读更多关于 How to querySelector elements of an element's DOM using Polymer

I have my element : <dom-module id="x-el"> <p class="special-paragraph">first paragraph</p> <content></content> </dom-module> and I use it like <x-el> <p class="special-paragraph">second paragraph</p> </x-el> in my imperative part: Polymer({ is: 'x-el', ready: function () { /* this will select all .special-paragraph in the light DOM e.g. 'second paragraph' */ Polymer.dom(this).querySelectorAll('.special-paragraph'); /* this will select all .special-paragraph in the local DOM e.g. 'first paragraph' */ Polymer.dom(this.root).querySelectorAll('.special-paragraph'); /* how can I select all

Data binding/updating between parent and child using <content> tag in Polymer1.0

阅读更多关于 Data binding/updating between parent and child using tag in Polymer1.0

I have a slider element that contains list of slides and a img to show hovered slide as shown below. I am binding currentImage between custom-slide (child) and custom-slider (parent) CASE I custom-slider.html <template> <div> <custom-slide current-image="{{currentImage}}"></custom-slide> <custom-slide current-image="{{currentImage}}"></custom-slide> <custom-slide current-image="{{currentImage}}"></custom-slide> </div> <img src="{{currentImage}}"> </template> It works perfectly when I used like this. index.html <body> <custom-slider> </custom-slider> </body> But when I change index and custom

Usage of Polymer 1.0 paper-styles Element

阅读更多关于 Usage of Polymer 1.0 paper-styles Element

Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to confuse me, particularly without full docs/examples to work from. It also seems there may be a few ways

Polymer 1.0 - injectBoundHTML() alternative

阅读更多关于 Polymer 1.0 - injectBoundHTML() alternative

What's the Polymer 1.0 equivalent to injectBoundHTML()? (i.e. appending HTML strings to nodes within a Polymer element and having data bindings resolve) A JSbin example - http://jsbin.com/jufase/edit?html,output EDIT: don't have enough SO cred to accept my own answer yet, but it should be down below somewhere. TL;DR - use "dom-bind" templates Although as techknowledgey pointed out it's not really supported well yet. The following seems to do the trick. function injectBoundHTML(html, element) { var template = document.createElement('template', 'dom-bind'); var doc = template.content

How to add custom validator to paper-input?

阅读更多关于 How to add custom validator to paper-input?

Need to add a custom validator which does some complex validation based on the values of other fields in the html. Tried adding custom validator function as an attribute to the paper-input element but it wont get called at all. <dom-module id='custom-ele'> <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input> <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input> ... </dom-module> <script> Polymer({ is: 'custom-ele', validate_1: function() { //validation code }, validate_2: function() { //validation code } }); <

Data binding in a dynamically inserted polymer element

阅读更多关于 Data binding in a dynamically inserted polymer element

问题 There're some times when we could need adding a custom element dynamically into a context. Then: The inserted polymer could receive some properties bound to another property inside the context, so it can change accordingly. At polymer 0.5 we could use PathObserver to binding a property to a context property for a recently added component. However, I did not find a workaround or equivalent at polymer 1.0. I have created an example for 0.5 and just the same for 1.0. See below the code of the