polymer

问题 I have a web page that renders some Polymer 1.0 custom elements. In the head section of my index.html file I have the following: <link rel="import" href="my-elements.html"> <script src="script1.js"></script> <script src="script2.js"></script> my-elements.html references other HTML files (via HTML imports) which in turn references javascript files using standard script tags. With Chrome browser it all works as expected. The javascript files within my-elements.html load before script1.js and

问题 Is there a reliable way to mock imported dependencies in Polymer (or vanilla web components)? I checked this question and other resources where they suggest to previously define the mocked custom element. While this approach will actually mock the custom-element definition, it will not prevent the original dep to be imported later and its scripts executed ! This would surely lead to conflicts, inconsistences, and unwanted code execution where the dependencies do not just merely define an

问题 We are using WebComponents with ES6 syntax. WebComponents polyfill webcomponents-lite.js (which doesn't include ShadowDOM) is not working in IE 11 whereas the webcomponents.js (which includes ShadowDOM) works fine. For our project use case, we would like to use 'custom-elements' without ShadowDOM. An error is thrown in IE, if we use webcomponents-lite.js - SCRIPT5022: Exception thrown and not caught. Is there any workaround available ? EDIT: The code which I'm trying to run in IE with

问题 I am not able to figure out how :host(:hover) works on child custom elements of a parent custom element. Can someone explain how to make this work? todoitem.html <!-- import polymer-element's definition --> <link rel="import" href="packages/polymer/polymer.html"> <polymer-element name="my-li" extends="li"> <style> :host(:hover){ color: red; } </style> <template> <content></content> </template> <script type="application/dart" src="todoitem.dart"></script> </polymer-element> todoitem.dart

问题 I've been using Polymer for a website redesign. I want to display an image that is bound to an element as a background-image . A fairly simple task, but unfortunately I'm having some issues. I made a running sample of the code for easy testing: click me. <polymer-element name="album-card" attributes="image"> <template> <style> :host{ display: block; position: relative; background-color: #99182c; width: 200px; } .description{ padding: 10px; color: white; } .circular{ width: 200px; height:

问题 How am I able to check (JS or HTML code) whether Polymer is supported by the current browser or not? 回答1: Short answer: Quick test: Firefox 38.0.5 alerts "No", while Chrome 44.0.2403.130 m alerts "Yes" function supportsPolymer() { return 'content' in document.createElement('template') && 'import' in document.createElement('link') && 'registerElement' in document && document.head.createShadowRoot; } if(supportsPolymer()) { //Good to go alert("Yes"); } else { //Is not supported alert("No"); }

问题 I am trying to focus an input element inside of a polymer template every time it stamps its contents. The problem is that I cannot select the input element until the template has loaded. Currently, I am just using setTimeout to focus the input 100ms after the template should load, but I want to know if there is a more elegant solution. Also, the autofocus attribute doesn't work, because the template may un-stamp and re-stamp many times. Right now, my code looks something like this (this is

问题 I set an observer on to catch all polymer recognized events on an property that is an array, but I catch get it to catch the change. In my example below my observer function "bigup" only gets called on when the property, "bigs" is first initialzed. <dom-module id="parent-page"> <template> <paper-button on-click="updateAll">Update</paper-button> </template> <script> var temp=[]; temp.push({'conversation':[{'message':'hello'}]}); Polymer({ is: 'parent-page', properties: { bigs: { type: Array,

问题 I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this. This is not working: this.form.password I want to get the Value of this field: <paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input> I also want get the Input for submitting of the e-mail input: <paper-input label="Login" id="email" name="email" size="25" value=""></paper-input> For submitting I am using: <paper-button

问题 I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here. My code for rendering it properly is the following: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href