webcomponents - hide the drop-down menu on window.onclick

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

css encapsulation in Angular

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

Aurelia Custom Element does not work inside Flex-Container

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

Saving to localStorage from an HTML Imports File

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

using paper in angular2

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

What is the substitute for :: shadow and / deep /?

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

Apply CSS dynamically with JavaScript

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)

Polymeric elements in the angular component 2

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

iron-polymer list only loading 20 items

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

How to register Polymer behavior with ES6?

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

Polymer CSS :: Content selector does not work

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

PolymerElements iron-ajax do not display data

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

How to call a function from nested components

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 <

Which polymer table

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

Problems obtaining custom elements with polymers

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

Precompiling Web Components

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

get all the elements that have an attribute x

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-

Polymer send table to server using post method

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

Get the list of published polymer properties

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&

Polymer core-scroll-header-panel styles and import

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

Angular Polymer Data Link

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

How to create custom HTML elements declaratively?

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