polymer

First, I'm loving Polymer. I'm not proficient in javascript, and I don't fully understand all the shadow-DOM stuff that's going on. But I take it that Polymer is under development for people like me (non-full-time coders who need to build websites quickly and programmatically by plugging simple pieces together). It's lots of fun, and once I understand how something in it works, it's really lovely. My latest attempt to build a site / app involves a lot of menu and submenu items connected to core-pages. I love the idea that I can just connect a menu item id with a div id inside core-pages and

Using the template from starter kit 2, is it possible to have the app drawer below the app-header ? Right now the app drawer starts from the top of viewport and is columnized next to app-header . I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath. After reading the element catalog for app-layout , I did not see a offical api/attribute to set this. I've tried a few things but no success: <app-drawer-layout fullbleed> <!-- Drawer content --> <app-header condenses reveals effects=

I have a custom element that utilizes iron-list to display an array of objects. Each item is generated via a template as follows: <iron-list id="projectList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex"> <template> <div> <paper-material id="itemShadow" animated elevation="1"> <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"> <!-- I use a paper-menu-button to display a list of available actions here --> <!-- list item object content here such as: [[projLI.desc]] etc. --> </div> </paper-material> </div> </template> </iron-list>

I need such construction in scss: :host { background: #fff; &([active]) { background: #000; } } meaning output like: :host { background: #fff; } :host([active]) { background: #000; } But I can't get it working any way I've tried. Is there any way to escape parentheses I don't know or something not overcomplicated? Just inserting piece of raw css like `code` in CoffeeScript would be great, but I do not see anything like this in documentation. If you want to use this shadow DOM selectors in the scss files you cant use :host(<selector>) nested right now. A workaround is to repeat :host for each

I am running Polymer Web Component Tester on a simple Polymer 2.x application template and get the following output: hook: prepare hook: prepare:selenium Starting Selenium server for local browsers 15:00:30.747 INFO - Selenium build info: version: '3.7.1', revision: '8a0099a' 15:00:30.747 INFO - Launching a standalone Selenium Server 2018-02-26 15:00:30.763:INFO::main: Logging initialized @246ms to org.seleniumhq.jetty9.util.log.StdErrLog 15:00:30.825 INFO - Driver class not found: com.opera.core.systems.OperaDriver 15:00:30.856 INFO - Driver provider class org.openqa.selenium.safari

Can someone please explain why the following error occurs and what it means? Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. I am not sure I am able to reproduce it but it occurs from time to time, usually when I import more than one custom element. It's extremely hard giving exact context since I am working on integrating polymer's paper/core elements for our in-house widgets. Broadly speaking what are the cases that I would see this error? Any kind of help is appreciated. Thank you. Regards,

This question is about scripting the main youtube site, client side from javascript. While it looks easy as a click, I found no way to change the current video by a new non in context video ID without reloading. This seems to be related with the polymer library in use, with a lot of shadow dom and some special behavior. Here is the context: I am making for my own use a bookmarklet that load videos from the reddit json api , wich supports CORS calls. So far so good, I can load many videos, image previews and links into the youtube sidebar, with this simple enough handcrafted script. Bookmarklet

Given the paper-input <paper-input floatingLabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input> How do I add some indication that the field is required to the user. From the core-input docs https://github.com/Polymer/core-input/blob/master/core-input.html AFAIK paper-input extends core-input therefore this should apply here too: core-input also can optionally validate the value by providing it with a regular expression to match against, or a validation function. The "input-invalid" event is fired if the input value changes and is