polymer-2.x

问题 We have CSS resets (margin:0px;padding:0px;) in a common style file which we have authored as one component and have included as a part of other components which we are developing. We are using universal selectors like below *,*:before,*:after{ color:pink } On each of our component we have a :host style with which we are trying to override this color :host{ color:yellow } As we expect :host to have more specificity over universal selector strangely this is not the case. universal selector

问题 I seem to be having trouble getting two-way binding to work with Polymer 2.0. I'm keeping things minimal, only using Polymer.Element. I define a parent component: <dom-module id="example1a-component"> <template> <xtal-fetch req-url="generated.json" result="{{myFetchResult}}"></xtal-fetch> <div>fetch result: <span>{{myFetchResult}}</span> </div> </template> <script> class Example1a extends Polymer.Element{ static get is(){return 'example1a-component'} static get properties(){ return {

问题 Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0: <link rel="import" href="../polymer/polymer.html"> <!-- `semantic-ui-button` @demo demo/index.html --> <dom-module id="polymer-button"> <template> <div class$="button {{size}}">{{label}}</div> </template> <script> class MyElement extends Polymer.Element { static get is() { return 'polymer-button'; } static get properties() { return { label: { type: String, value: 'polymer

问题 Unable to style an element using Shadow DOM with Polymer 1.x or 2.x. Consider the following custom element in Polymer 2.0: <link rel="import" href="../polymer/polymer.html"> <!-- `semantic-ui-button` @demo demo/index.html --> <dom-module id="polymer-button"> <template> <div class$="button {{size}}">{{label}}</div> </template> <script> class MyElement extends Polymer.Element { static get is() { return 'polymer-button'; } static get properties() { return { label: { type: String, value: 'polymer

问题 I have created a custom Polymer 2.0 based web component which aims to be installed on third-party websites in order to display content managed from my website. The web component in question depends on 3 other custom web components but also on iron-ajax , iron-dropdown , iron-icon , iron-icon-svg , marked-element and paper-icon-button . In order to maximize browsers compatibility, the code is transpiled to ES5 by using polymer-build with the default es5-bundled preset. Once done, the build

问题 I use Polymer 2.0 and my build setting is: "builds": [ { "name": "bundled", "bundle": true, "js": { "compile": true}, "css": { "minify": true }, "html": { "minify": true } }] I get "Can’t find variable: babelHelpers" error after build. The Polymer CLI version that I use is 1.1.0. EDIT: I was using polymer-cli locally. After installing latest polymer-cli globally, now I get “Constructor requires ‘new’ operator” on safari and “Failed to construct ‘HTMLElement’: Please use the ‘new’ operator,

问题 How does one import custom fonts into a Polymer app or element? Per @tweightman on the Polymer Slack Channel: <link rel="import" href="/bower_components/polymer/polymer-element.html"> <link rel="import" href="/bower_components/my-typography/my-typography.html"> <dom-module id="my-page-styles"> <template> <style include="my-typography"> :host { @apply --my-custom-font-mixin; } </style> </template> </dom-module> Stumbled across a possible solution: instead of using @font-face rules inside my

问题 when I try to hide drawer in Login page it occur error. I use dom-if for hiding menubar and according to it's syntax I used <template> tag. But it occur error. Polymer code <!-- Drawer content --> <template is="dom-if" if="[[_isLogin()]]"> <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]"> <app-toolbar>Menu</app-toolbar> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> <a name="homepage" href="[[rootPath]]homepage">Homepage</a> <a

问题 (This question and code sample is for Polymer 2, but it's possible the same issue is present in 1.x) The Goal: I want to create an element (the Editor) that allows viewing/editing of the properties of certain types of objects, and another element (the List) that displays editable arrays of these objects, delegating the viewing/editing to the Editor element, while retaining control over the addition/removal of obejcts from the list. A to-do list is a good example of this (note: the Polymer to

问题 ve read : https://www.polymer-project.org/2.0/toolbox/case-study#routing And: https://github.com/PolymerElements/app-route I think I am just confused how to use the subrouting component, but the documents and example I have read hasn't really gotten me anywhere. If anyone could point out the elephant in the room for me that would be great. What am I trying to Achieve? I have a list of items(called matters) which I display on my-matters.html (this page currently calls another custom element