polymer

问题 Displaying the menu only to members I've got this bit of code <app-drawer-layout fullbleed> <!-- Drawer content --> <template is="dom-if" if="{{signedIn}}"> <app-drawer> .... This displays the menu only when users are logged in to the application. It works fine but is there anyway to remove the error it causes in the console. error: polymer-mini.html:2046 Uncaught TypeError: Cannot read property 'getWidth' of undefined 回答1: The layout logic in <app-drawer-layout> requires an <app-drawer> to

问题 I'm using chai-webdriver to test some Google Polymer components and whenever webdriver loads the Chrome browser it uses a default set of switches. In order for Polymer's Shadow DOM components to appear in the DOM tree, it seems I need to enable the "Show user agent shadow DOM" option in the dev tools, but this gets reset back to disabled every time selenium-webdriver loads Chrome. I could add this to the default switches in webdriver, but I can't find a switch for it in this list. Anyone know

问题 I'm using chai-webdriver to test some Google Polymer components and whenever webdriver loads the Chrome browser it uses a default set of switches. In order for Polymer's Shadow DOM components to appear in the DOM tree, it seems I need to enable the "Show user agent shadow DOM" option in the dev tools, but this gets reset back to disabled every time selenium-webdriver loads Chrome. I could add this to the default switches in webdriver, but I can't find a switch for it in this list. Anyone know

问题 I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed. However, when I get around to adding the 'rect' elements in the svg, despite them showing up in the Chrome devtools element inspector, they don't show up in the chart itself. dataChanged: function() { var data = this.data; var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = this.width - margin.left -

问题 I'm using Polymer to render some d3 charts. When the Polymer is initially rendered I only draw a graph with axes and no data, since the data comes later once the API calls succeed. However, when I get around to adding the 'rect' elements in the svg, despite them showing up in the Chrome devtools element inspector, they don't show up in the chart itself. dataChanged: function() { var data = this.data; var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = this.width - margin.left -

问题 Consider this code: <div class="container"> <table class="c"> <tr> <template is="dom-repeat" items="[[days]]" as="o"> <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td> <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr> <template is="dom-if" if="[[!lastDayOfCalendar(o)]]"><tr></template> </template> </template> </tr> </table> </div> Why do the </tr> and <tr> not get applied to the html? Full JS Bin demo here: https://jsbin.com/dujekefoga/edit?html,output Edit: Fixed

问题 Consider this code: <div class="container"> <table class="c"> <tr> <template is="dom-repeat" items="[[days]]" as="o"> <td class$="[[dayClass(o)]]"><span class="d">[[formatDay(o)]]</span></td> <template is="dom-if" if="[[lastDayOfWeek(o)]]"></tr> <template is="dom-if" if="[[!lastDayOfCalendar(o)]]"><tr></template> </template> </template> </tr> </table> </div> Why do the </tr> and <tr> not get applied to the html? Full JS Bin demo here: https://jsbin.com/dujekefoga/edit?html,output Edit: Fixed

问题 Dealing with some relics of the past in our elements' implementation, we've hit a snag reaching into <template> elements externally to retrieve specific content. For example, we leave a <script id="ceci-definition"> in our elements which contains some meta data about the element. Looks like this: <polymer-element> <template> <script id="ceci-definition">{ ... }</script> </template> </polymer-element> Later, we try to retrieve it using something ugly like this: window.CustomElements.registry

问题 Following the question I would like to ask about the appropriate way to check the initial render status of a component (not the update status) in shadow DOM. Is there any similar to document.readyState or a promise ? I have also tried to do: getItems() { this.updateComplete .then(() => { this.nodesLists = this.shadowRoot.querySelectorAll(".name"); }) .then(...) } which also failed. Tia 回答1: await this.updateComplete (or this.updateComplete.then(...) ) is the correct way to wait until the

问题 For complicated elements, is is a good practice to (almost) always have Polymer definition inside a closure to keep all the variables and methods which should only be modified internally private, as opposed to attaching them to the element (e.g. 'this')? Like following: <polymer-element name="animating-element"> <script> (function() { var privateObj = {}; privateObj.internalState = 0; //private static method privateObject.setupState = function(polymerObject) { if(polymerObject