paper-elements | Aggregation component for various paper-elements | Widget library

What is the best way to disable a custom-element from being clicked (e.g. while it is in an animation state or just because it should be disabled for the user). Meaning no input events like "click"/"tap" should be fired and links disabled.

I want to disable the whole element including other paper-elements, not just paper-button etc. For this I know there is the "disabled" attribute.

Is it best to use CSSwith pointer-events? Or is there any other way working for all browser?

enter link description here

I'm making an web application (Server rendered, not SPA), but with some client-side funcionality, such hide element when other element have some value, make HTTP calls or validate some input fields.

Now, I'm using WebComponents (paper-elements and others) to make the UI, and Vanilla JavaScript (with some Polyfills, such WebComponents.js or fetch.js) to do the functionality.

So far, however, I have realized that I have many JavaScript lines to do things (such as hiding an input field if a condition is not met) that could be reduced (or even deleted) with a framework like Vue.js and expresive HTML with directives.

My problem, is when I try to use Vue.js with paper-elements, or other elements, Vue.js directives like v-model don't work (even the paper-element value attribute is value like the standard HTML elements).

I tried using :value instead of v-model, and this works, but only with a single way data binding (this is normal in v-bind) but I need two way data binding in the paper-elements, and v-model don't work.

An idea can be, while using a colon (shorthand of v-bind) to indicate one way data binding, (e.g. :disabled="someCondition"), use two colons to indicate two way data binding in any attribute (in some WebComponents, can be useful do this in other HTML attribute beyond value) (e.g. ::value).

Someone know any framework with expresive HTML like Vue.js thats implements data binding (two way in any html attribute) and basic control structures (like v-if and v-repeat) or do the two ways data binding in any HTML attribute with Vue.js (o more simple, do v-model work with paper-elements).

I don't know making WebComponents feauture of Vue.js, because I use Polymer for do that.

Thanks you!

I want to have the same feature as Polymer paper-elements drop-down menu have with disabled.

The drop-down menu code:

I'm trying to convert my vaadin-grid to v2 so I can use the selectionMethods to extract the selected rows as json or csv.

in comments my working v1 vaadin grid, wich imports a json.

imports which are included in the import file:

• vaadin-grid.html
• vaadin-grid-selection-column.html
• vaadin-grid.html
• paper-elements/paper-elements.html
• List item

my vaadin contains all files from: https://github.com/vaadin/vaadin-grid

the example file I'm working with: https://jsfiddle.net/Saulis/sse7d93h/

I am trying to follow the documentation (https://www.webcomponents.org/element/PolymerElements/app-layout/app-drawer-layout) for setting the responsiveWidth attribute on my app-drawer-layout in order to have the app-drawer closed by default:

After upgrading a big Angular2+Polymer1 based client project from Angular2 beta to stable, I've noticed that Angular's (eventname) DOM attribute triggers functions outside NgZone when using Safari, as well as RxJS's callbacks (subscribe, map).

This is a problem because that means I have to wrap every function that change template bound variables with NgZone.run() calls only for Safari users (both iOS and Desktop), otherwise Safari users (+ iPhone) have to trigger a change detection event by clicking randomly on the screen.

On Chrome the functions are called inside NgZone (verified by executing NgZone.isInAngularZone()).

Is there a more elegant solution provided for Safari (other than wrapping all calls with NgZone.run())?

Uploaded a sample to reproduce this issue (Angular2 + Polymer). https://github.com/aabluedragon/safari-ngzone-issue

I managed to solve one of the two issues - (domevents) outside NgZone by including webcomponentsjs polyfill in index.html instead of angular-cli.json's scripts:[] section. Plain copy&paste: .

However the Http.post callback are still called outside NgZone, though what I have noticed is that if I simply remove the webcomponentsjs polyfill, the callbacks are executed inside an NgZone!

Now this issue only happens if I use webcomponents <=0.7.24 which I have to because that's what Polymer1 depends on. However I tried to use webcomponents 1.0.0-rc.6 and then the issue is gone, RxJS callbacks are inside an NgZone! but then polymer1 elements (e.g paper-elements) do not work, so I remain without a solution.

Updated project sample in github accordingly.

Submitted an issue on github: https://github.com/angular/zone.js/issues/671

I heard about Google Polymer and decided to try it out. I have had some trouble loading the components properly. It does not seem that my elements have any colors or anything.

When I download the Starter Kit 1.0 from Google Polymer website, then it appears like this.

But when I try to import to my own project it appears like this (The functionality works)

Here is my HTML