I have looked at other questions that seemingly had a similar issue, but none of the accepted answers have solved my issue. I am attempting to fetch new names and load them into child component when redux is updated with new IDs. When I use only redu
dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.owne
I have been recently exploring the css and dom encapsulation by the Angular components. I scaffolded a quick project using ng-cli and loaded a component. Let's say that component selector is 'app-component'. This encapsulates all the dom and css pert
Hi we've recently started making custom elements in Aurelia. One of the rules we have established is that we cannot put class names on custom elements when using them. This is causing problems for me because the custom element itself doesn't have any
I find Angular 2 components very nice, as we can write down our own HTML elements that are suited for the app we are building, however, since I'm getting started with Angular 2, I feel I'm using them the wrong way around. The way I've been using comp
I'm using HTML imports, as a vehicle to dynamically inject content on a website. It works, perfect, there is a good article which exposes the use of imports on both files and templates. Indeed there are few other articles, but Bidelman's is the most
I have been struggling for quiet a while about using paper-data-table (paper data table by David Mulder) in my angular 2 application. The problem im facing is described in the data table issue: Issue opened regarding using the table in angular 2 appl
Consider I want to extend the native button element, and create my own super-button element. As I know, it must follow the following pattern: var SuperButton = document.registerElement('super-button', { prototype: Object.create(HTMLButtonElement.prot
The two shadow-piercing combinators have been deprecated as stated in https://www.chromestatus.com/features/6750456638341120 Then what's the substitude for achieving the same thing, or this shadow-piercing feature has been completely abandoned?The pr
What is a good way to apply styling dynamically (i.e. the value of styles are created at runtime) to HTML elements with JavaScript? I'm looking for a way to package a JavaScript widget (JS, CSS and markup) in a single component (basically, an object)
I have a set of custom polymer elements, that I would like to use within an angular 2 application. It seems like there's a problem concerning the content tag of the polymer element. The content of the element gets rendered at the wrong place within t
I have an a test array that I am retrieving from iron-ajax with around 1000 items. I set that return array to the people property of my custom polymer element. Iron-list is displaying the first 20 results, but when i scroll down the rest of the resul
If I do Polymer({ is: 'pp-app', behaviors: [PlayPlan.HelperBehavior], scrollPageToTop() { document.getElementById('mainContainer').scrollTop = 0; }, onDataRouteClick() { var drawerPanel = document.querySelector('#paperDrawerPanel'); if (drawerPanel.n
I have a set of paper buttons like below: <div><paper-button id="100" on-tap="addQuantity">100ML</paper-button><paper-button toggles id="200" on-click="addQuantity">200ML</paper-button>
I haven't used Polymer since version 0.5 so I decided to give it a shot again. I've been having some trouble with the :host and ::content selectors, especially given I found that the :host selector only works when my style tag is placed outside the t
I have two custom elements. student-details.html and student-service.html student-details.html looks like this <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="student
I know, to register our own elementTypes, we use Object.defineProperties(ElementPrototype,{ get: function(){ }, set: function(newVal) { } }); now it works fine for value attribute as long as i am not attaching onchange listener, but in case i do , th
This here is my iron-ajax element inside a dom-module: This here is my javascript: var iron_ajax = document.querySelector('iron-ajax'); iron_ajax.body = {"full_names":profile.getName(),"access_token":googleUser.getAuthResponse().id_tok
I have this code in index.html: <core-pages selected="{{welcomPage}}"> <div class="blueBackground"> <h1>asd</h1> <h3>asd</h3> <paper-button on-tap="{{welcomPagePlus}}"> Keep Going <
Here is an example: http://miriti.ru/svgtest/ If you'll look at this example in any browser you will see two grey squares with green circles (labled "Symbol") inside. Except for Firefox (I am testing on Firefox 35.0.1 on windows and mac os x). T
I don't see an official Polymer Table component. A quick web search yields the following third party components. It doesn't look like an official Polymer table is in the works. Am I wrong? Is there an idiomatic way of representing tabular data in Pol
I followed the getting started tutorial from the official polymer website here: https://www.polymer-project.org/docs/start/creatingelements.html I'm trying to test out web components and polymer, but I can't get a basic template working. I can't get
I've managed to setup a simple registration form with Polymer: <polymer-element name="app-registration"> <template> <style> ... </style> <section> <paper-input class="username" .... ></paper-input
I'm using the web component implementation in knockout.js in a project of mine in order to abstract UI components that I reuse throughout my app. One of those components is an About popup which contains a bunch of info on my app. Abstracting this Abo
Im having trouble searching for this on the polymer docs. I was wondering if anyone here can point me to or show me an example of a way to get all elements that have a particular attribute. For instance: the component: <polymer-element name="prpl-
I want to send some int array to server but I don't now how realize it. I try to use core-ajax also I know about polymer-ajax but it element deprecated. I did something like this: <template> <paper-fab on-tap="{{sendMethod}}"></pa
Is there a way of getting the list of all published properties defined in a polymer component? (e.g. get the available properties of component public API) <polymer-element name="sample-component" attributes="foo1 foo2" bar="10&
I am very new to Polymer and following is my first try at it. I wanted to add a core-scroll-header-panel (which is cool!) and it works rather OK - code was mostly copied from samples. But I cannot access the shadow dom of the core-scroll-header-panel
I want to make two way data binding between Polymer and Angular, for this I am using Angu-poly library. Here is a link to an example which is working, while passing strings via name and age attributes: working. <x-kid bind-polymer ng-repeat="kid i
I am trying to create custom elements declaratively but having trouble with it. I read so many docs, but they all seem outdated or insufficient because of the super new and changing technology. Does any know how to fix this? The current context (this
