FAQ Database Discussion Community


Can you build Ember Component so that it can co-exist and interop with other web components?

ember.js,web-component
I want to know if you can create Ember Component in the way it can: render with other web components (say, built by Polymer or X-Tag) interoperate through parameter-passing and/or events inside the application that is NOT built by emberjs? So far I've create web components using these documents as...

ReCaptcha doesn't work when used with Polymer in Firefox and IE

polymer,recaptcha,web-component
For some reason Polymer and recaptcha will on work together in Chrome, Safari, and Opera, but not IE or Firefox. When clicking the checkbox for "I am not a Robot" in Firefox/IE the following error message appears in the console and the captcha/challenge image is never displayed: TypeError: Argument 1...

Polymer core-item selected issue

polymer,web-component
Code can be found here: https://ele.io/MikeFielden/cw-style-demo-menu What Im trying to achieve here is to have a left nav component that I can include on many pages with an attribute on the tag selected that I can use to key off of and select the corresponding core-item. For the life of...

Variable Width for Polymer Paper Tabs

html,css,polymer,web-component
I want to implement the Polymer Paper Tabs, however I am struggling to find a way of having varying widths for the tabs. I see that the scrollable tabs have the variable widths however I can not use these for my use case due to the scrolling arrows on display....

Mozilla stance on HTML imports

firefox,web-component
Can anyone tell me whether Mozilla has shifted its stance on not implementing HTML imports (part of the HTML5 Web Components spec)?

Adding CSS and JavaScript links to elements.html

polymer,web-component
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates. Is it bad style to overload elements.html with...

Paper-Input autofocus amongst 2 competing paper-inputs

javascript,ruby-on-rails,polymer,web-component
I have 2 paper inputs (one in header) for a search engine and it defaults the autofocus to the header one when both have "autofocus" like so. <paper-input id="bodyinput" name="thetext" type="text" class="searchbar" placeholder="Enter a search term here..." autofocus> </paper-input> The header bar is hidden on the homepage using .hide() in...

Polymer paper-fab display square mask in mobile

css,polymer,material-design,web-component
I have a paper-fab on my index page and it is displaying right until I tap on it. I say tap because this behavior only occours in mobile environment (in the chrome mobile view or on my Nexus 5). This is the active button (on tap): Note that the background...

How angular2 is going to use shadow dom while it's not supported in some popular browsers?

web-component,shadow-dom,angular2
From the documentations: When a component is instantiated, Angular creates a shadow DOM for the component. loads the selected template into the shadow DOM. creates a child Injector which is configured with the appInjector for the Component. But, as far as I know, shadow DOM is not supported yet in...

How to modify existing in a element?

javascript,polymer,web-component
I would like to extend the content and add new dom elements that contain data-binding. In the example runs the add new item, but data-binding does not work. Is it possible to solve my problem? <polymer-element name="wizard"> <template> <style> :host { display: block; } :host #pages section { position: static;...

Polymer multiple similar elements and click events

polymer,web-component
I am trying to build a custom polymer element which has a div like this <core-menu> <paper-item on-tap={{openPage}}><core-icon icon="add"></core-icon> Add Issues</paper-item> <paper-item on-tap={{openPage}}><core-icon icon="view-list"></core-icon> View Issues</paper-item> <paper-item on-tap={{openPage}}><core-icon icon="lock"></core-icon>Logout</paper-item> </core-menu> And this openPage function needs to provide this kind of operation openPage:...

Why does this polymer element's property resolve to undefined?

javascript,polymer,web-component,polymer-1.0
I am trying to dynamically assign an attribute to an iron-ajax template but it resolves to undefined. <dom-module id="products-service"> <style> :host { display: none; } </style> <template> <iron-ajax id="productsajax" auto url="http://localhost:3003/api/taxons/products" params='{"token":"my-token"}' method='GET' on-response='productsLoaded' handleAs='json'> </iron-ajax> </template> </dom-module> <script> (function() { Polymer({ is: 'products-service', properties: { categoryid: { type:...

Light DOM style cascades down to the shadow DOM

css,polymer,web-component,shadow-dom
I have created a custom element with polymer. When the element is included within an h2, it inherits the h2's boldness and font-size. I need my components to be sheltered from the outside world and not be affected by light dom styles. How can I achieve this if the light...

Updating a polymer element template

javascript,templates,polymer,web-component,2-way-object-databinding
Okay, so I have a bunch of polymer customer element siblings as the different pages of my single page app... They are all contained within a core-animated-pages element. I communicate data via a shared custom element that uses core-localstorage as its backend. Now, one one child is done, it fires...

How to let the users style a web component with their own CSS?

css,web-component
I know we can use CSS to style elements of a web component. But how can I allow the user style my web component? For example let's say I'm making a video player but I want the people who use my component be able to set the play button or...

Alternative to “in” expression for iterating over objects polymer (0.5.4)

polymer,web-component
Using the repeat and in expression it is trivial to iterate over arrays, but swapping this.data = ["foo","bar"]; to this.data = {foo:"football",bar:"barfly"} fails to iterate over the object. I have seen examples of using Object.key in order to get each value, but the index returned is 0,1 instead of "foo"...

Toggling between two divs using Polymer

javascript,html5,polymer,web-component
I ran into a issue where using polymer I would like to toggle through two divs, the problem I have is, I want to use the polymer standard of toggling where they use: hidden?="{{toggleMe}}" as a attribute on the div and just bind it then make a function that would...

Create an anchor link tag that just adjusts the hash without losing the query search string

html,hyperlink,anchor,web-component
Assume the current URL is: http://server.com/?key=value#/foo In a normal anchor tag link, the following will just affect the anchor hash: <a href="#/bar">LINK</a> And the URL becomes: http://server.com/?key=value#/bar However, I am adding links in a template in a web component that was imported from another .html file. Therefore, for the anchor...

How to get composed DOM of Polymer Web Component?

javascript,html5,polymer,web-component
I'm using Polymer 0.8-preview. For example, I have the following component: <dom-module name="greeting-tag"> <template> <ul> <template repeat="{{s in salutations}}"> <li>{{s.what}}: <input type="text" value="{{s.who}}"></li> </template> </ul> </template> </dom-module> <script> Polymer({ is: 'greeting-tag', ready: function () { this.salutations = [ {what: 'Hello', who: 'World'}, {what: 'GoodBye', who: 'DOM APIs'} ]; } });...

Registering a custom element from a chrome extension

google-chrome-extension,polymer,web-component
I have tried registering custom elements through native javascript and polymer from within a chrome extension with no luck. The issue is documented here. Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'polymer-element'. Elements cannot be registered from extensions. I am looking for suggestions for using...

core-animated-pages in Polymer 1.0

polymer,web-component,polymer-1.0
I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

polymer load page on-click

javascript,cordova,polymer,web-component
In Polymer application a have chat-list inside core-scroll-header-panel , where I can see all the dialogs with friends. I want to load on click chat window with one of them. I also want to pass parameter (friend_id) while loading dialog. What is the correct way to do it? Using core-ajax...

Updating local dom won't reflect shady dom

javascript,html,dom,polymer,web-component
In x-num.html <link rel="import" href="../polymer/polymer.html"> <dom-module id="x-num"> <style></style> <template> <span id="number"></span> </template> </dom-module> <script> Polymer({ is: "x-num", properties: { type: String, value: 'normal' }, attached: function() { var contentNode = Polymer.dom(this).childNodes[0]; var number = Number(contentNode.textContent); var result = ""; switch(this.type){ case "simplified": if(number > 1000) result = number / 1000...

All params undefined but attributes has values

javascript,web-component
Whilst playing around with custom elements I notice that the attachedCallback function has a populated attributes collection. Namely it's a NamedNodeMap containing all passed attributes to the element. I also notice that specifying parameters on the attachedCallback function always produces undefined. How is it possible to set up the attributes...

How to build a multilingual website with Polymer?

html,polymer,multilingual,web-component
I don't want to duplicate my components or use templating application. Then, how can I do that?

WebComponents: Remove cloned template

javascript,html5,clone,web-component
I'm using the webcomponentsjs polyfill. No x-tag, polymer, etc. preferably vanilla JS. After cloning a template and appending it to the document I'm not able to remove it again since it's missing a parentNode. var tmpl = document.getElementById('tmpl'); var clone = document.importNode(tmpl.content, true); document.body.appendChild(clone); console.log(clone.parentNode); // parentNode is null (not...

google-signin don't return user info

polymer,web-component,google-signin,google-web-component
I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

Polymer 1.0 services issue

polymer,web-component
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...

Polymer Template: What are valid selects for content insertion points

templates,polymer,web-component
This may be fairly simple question, and though I can find some simple examples, I cannot find documentation on this on the Polymer Project website. In the template for an element, you may use: <content select="value"></content> My question is what are valid values for the select attribute. Is it simply...

SVG tag doesn't work within polymer component in Firefox

html5,svg,polymer,web-component
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). These SVGs are absolutely identical but the second one...

Polymer Data-Binding will not replace

javascript,polymer,web-component
I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

Replace container element when using Knockout component

javascript,knockout.js,web-component,knockout-components,knockout-templating
Is there a way to configure a Knockout component to replace the container element instead of nesting its content inside the container element? For example, if I have a custom component registered as my-custom-element with the following template: <tr> <p>Hello world!</p> </tr> Is it possible to use the component like...

how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?

javascript,polymer,web-component
Here is my code for polymer version 1.0. This is paper-dialog element i want to execute a function on closing this dialog. How can i do that? <paper-dialog id="paper-id" entry-animation="scale-up-animation" exit-animation="scale-down-animation" > <sample-element></sample-element> </paper-dialog> ...

Polymer: Create a “general” custom element

javascript,polymer,web-component,custom-element
I am attempting to build an element with attributes that would specify which element should take place of this element. I have a 3d-card flip element that I am using fo this purposes in the index.html that is defined as: <html> <head> <script src="bower_components/webcomponentsjs/webcomponents.js"> </script> <link rel="import" href="elements/general-element.html"> </head> <body>...

Data binding in a dynamically inserted polymer element

binding,polymer,web-component,observers,polymer-1.0
There're some times when we could need adding a custom element dynamically into a context. Then: The inserted polymer could receive some properties bound to another property inside the context, so it can change accordingly. At polymer 0.5 we could use PathObserver to binding a property to a context property...

relative path resources from JS with HTML imports

polymer,web-component
I've got a (Polymer) web component that I want to make accessible to people in a cross-origin resource sharing (CORS) fashion. That works fine except I'm not sure how I can give a relative path for resources like images and JSON files from JS code inside that component. They are...

How to use Polymer (1.0) with Rails (4)?

ruby-on-rails,ruby-on-rails-4,polymer,web-component
Now that Polymer (1.0) is "Production Ready" Which is the best way to use it on Rails (4) ? I read a lot and I saw that all the solutions are deprecated, (For example using Gems like: likepolymer-rails, emcee , etc) I'm lost trying to create a good structure for...

reset style inheritance not working in shadow dom

javascript,html,css3,web-component,shadow-dom
I'm using shadow dom to avoid my element's style from accidently affected by the host document,but it still inheritance some attributes from the parent,like the 'color','font-size','line-height',etc. After searching google,I have found that there exists one attribute which can be used to achieve this,and it's the 'resetStyleInheritance' attribute. I use the...

Nested web component's `attachedCallback` not running on appended

html,html5,web-component,custom-element
I'm playing with W3C web components. I have a homepage, which includes component A: <!-- homepage.html --> <link rel='import' href='a.html'> <component-a></component-a> In component A I include another component B: <!-- a.html --> <link rel='import' href='b.html'> <template> <component-b></component-b> <component-b></component-b> </template> <script> void function() { var currentDocument = document.currentScript.ownerDocument function getTemplate(selector) {...

Attributes on custom HTML elements

html5,web-component
When working with custom HTML elements in web components, should I still name custom attributes with the prefix data? For example: <!-- Should form be data-form? --> <my-button form="foo">click me</my-button> ...

Polymer hello-world component not rendering

polymer,web-component
I'm following the Polymer tutorial at https://www.youtube.com/watch?v=wId1gMzriRE I'm using Polymer 1.0 (the tutorial is an older version). I had changed the platform.js to webcomponents.js. Now my index.html is as <!doctype html> <html> <head> <title>Polymer Trial</title> <script src="bower_components/webcomponentsjs/webcomponents.js"></script> <link rel="import" href="elements/hello-world.html"> </head> <body> <h2>Test</h2> <hello-world></hello-world>...

Polymer; Local webserver works, dropbox doesn't. suspect: https

javascript,polymer,web-component
Using Polymer I am able to host my files on a local http server, however when uploading the files to the public directory of Dropbox the page no longer renders. The only major difference I can see between my local server and dropbox, is that dropbox is serving the pages...

Submitting a form using a custom button using HTML Web Components

html5,web-component
I have defined a custom DOM element, but when placed inside a form, it does not submit it. How can I get the form to submit when I click the button? <form action="/foo" method="GET"> <my-button type="submit">click me</my-button> </form> This is the prototype configuration for the custom element: myButton = Object.create(HTMLButtonElement.prototype);...

When in a Polymer component's life cycle are changed watchers fired for declaratively-specified values?

javascript,polymer,web-component
From the Polymer docs, the life cycle for most callbacks is clear: created -> ready -> attached -> domReady ^ | | | ---------- detached <---------- And I imagine attributeChanged() will be fired at any point in this lifecycle when an attribute is modified, e.g. even as early as when...

Why is my CSS taking effect outside of my template?

html5,web-component
I am importing a web component containing a template into index.html. Why is the style in my-template having an effect on the paragraph in index.html. Put another way, why is all the text in index.html rendered as blue? I thought CSS inside templates was namespaced in some way. Is this...

I get 0 instead of empty string in polymer's paper-dropdown-menu (core-menu)

data-binding,types,polymer,web-component
I am using a dynamic dropdown menu with the options being fed in with databinding. The data looks like this: options = [ { name: "Alle", value: "" }, name: "100", value: "100" }, // ... ] And the code like this: <paper-dropdown-menu label="Select"> <paper-dropdown class="dropdown"> <core-menu class="menu" valueattr="data-value" selected="{{search.selectedItem}}">...

How do I fix this custom element element implementation?

html5,web-component,shadow-dom
I am trying to create a "transcluded" version of a custom element where when it wraps some arbitrary HTML it will selective pick content from that wrapped mark-up and render it within its shadow DOM body. Like so: <tab-content> ..... <span class="name">John</span> <span class="email">Email</span> ..... </tab-content> When I use the...

Dynamically created html import inside a polymer element (Version 1.0)

javascript,html,polymer,web-component,polymer-1.0
Dynamically created html import inside a polymer element Does anyone know how to dynamically add a html import into a polymer element (version 1.0)? The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree. Does anyone know any way around this...

Polymer, template won't evaluate true and bind

javascript,html5,templates,polymer,web-component
Using polymer I am very simply trying to evaluate wether an object property is a specific value, and if so bind the contents of truthy template to the dom. I have: <polymer-element name="template-elem"> <template > <div> <template if={{response.data.type === "message"}}> <div>working</div> </template> </div> </template> <script> Polymer({ response: {}, ready: function(){...

app-router not working imperatively way

polymer,web-component
I have this Polymer custom element: <link rel="import" href="../../../bower_components/polymer/polymer.html"> <link rel="import" href="../../../bower_components/core-animated-pages/core-animated-pages.html"> <link rel="import" href="../../../bower_components/app-router/app-router.html"> <polymer-element name="custom-pages" attributes="selected"> <template> <link rel="stylesheet" href="custom-pages.css"> <app-router id="router" bindRouter core-animated-pages...

Paper ripple does not fire

javascript,polymer,web-component
I have this code as a custom element: <link rel="import" href="../paper-ripple/paper-ripple.html"> <polymer-element name="menu-item"> <template> <style> :host { box-sizing: border-box; position: absolute; font-size: 16px; width:100%; } .center{ text-align: center; } </style> <div class="item"> <div class="content center" fit> <content select="*"></content> </div> <paper-ripple fit></paper-ripple> </div> </template> <script> Polymer({ });...

Polymer 1.0 - Issue selecting dynamic element by id

javascript,web-component,polymer-1.0
I am trying to select an element by id that was created dynamically: <dom-module id="filter-box"> <style> :host { display: block; } </style> <template> <h4 id="title">{{title}}</h4> <paper-checkbox id="test">test</paper-checkbox><br> <template is="dom-repeat" items="{{filters}}"> <paper-checkbox id="{{item}}">{{item}}</paper-checkbox><br> </template> </template> </dom-module> <script> (function () { Polymer({ is: 'filter-box',...

Importing styles into a web component

html5,web-component,shadow-dom
What is the canonical way to import styles into a web component? The following gives me an error HTML element <link> is ignored in shadow tree: <template> <link rel="style" href="foo.css" /> <h1>foo</h1> </template> I am inserting this using shadow DOM using the following: var importDoc, navBarProto; importDoc = document.currentScript.ownerDocument; navBarProto...

Isomorphic ReactJS or Web Components(Polymer) Which one to be followed by a developer? [closed]

reactjs,polymer,web-component,isomorphic-javascript
In these years we are seeing multiple technologies on disposal for web development like: Isomorphic React: It provides a common code base shared among client and server. Web Components : Polymer.js shows the way of creating native element for the browser. Both of these technologies are going in opposite direction.Which...

How do I bind a function to elements inside of a Shadow DOM?

javascript,html,web-component,shadow-dom,custom-events
I'm working with Web Components and try to bind a click event to an element inside of the Shadow DOM. 1. component.html included as <link rel="import" ...> inside of index.html <template id="my-element"> <section> <header> <content select="h1"></content> <button></button> </header> <content select="div"></content> </section> </template> 2. later element usage: <my-element> <h1>Headline</h1> <div>...</div> </my-element>...

Polymer elemento and binding

javascript,polymer,pie-chart,web-component
I have developed a polymer element. In this element I receive some parameters. When I pass [value array] parameter to element does not work. But if I put the values manually, it works. This is the polymer element head: <polymer-element name="nick-viewer-card" attributes="program details link chart"> This is the code problem:...

Polymer using core-selector - how to set selected value with array

javascript,html,polymer,web-component
I am using polymer 0.5 and specificly the core-selector element: <core-selector multi valueattr="label" id="specialisms" layout horizontal wrap around-justified> <div class="item core-selected" label="label1" active>Boo</div> <div class="item core-selected" label="label1" active>Baa</div> <div class="item" label="label1">Cow</div> </core-selector> How can i give multiple selected values with an array? What is the best way of doing this?...

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

polymer,web-component,templatetag,polymer-1.0
Using Polymer 1.0, I have created a paper-drawer-panel layout. In the drawer I have a menu using paper-menu with paper-items which are bound to the iron-pages. I took this example from Content Switcheroo with Core-Pages -- Polycasts #09 and converted it to use the Polymer 1.0 elements. In the code...

Setting auto dimension on core-image causes it not to render

html,css,polymer,core-image,web-component
I have a core-image component in my page that I'm sizing to fit the width of the div it is within. <div class="content"> <core-image class="sized gray" sizing="contain" preload fade src="Koala.jpg"> </core-image> </div> Sizing this with absolute dimensions is fine, eg .sized { width: 200px; height: 200px; } However, sizing with...

Polymer: flashes of white screen when page loads

javascript,polymer,jekyll,web-component,github-pages
I'm currently working on the web-site using Polymer, Jekyll and Github pages. But I'm facing one big issue. When switching between pages there is a white screen showing every time, which is not correct behavior. I would like to always see the header section and left menu (without flash) even...

How to get prototype of a registered webcomponent without instantiating it

web-component
Consider the following code in a javascript library; document.registerElement('my-component', { prototype: { foo: true }}); It seems registerElement returns a function which can be used as a constructor. How can I get a reference to this function later ? var tempDom = document.createElement('my-component') console.log(tempDom.__proto__) Seems working but it requires creating...

Polymer google-signin element gets Cannot read property 'currentUser' of null

javascript,polymer,web-component,polymer-1.0
I'm trying to get the google-signin element to work with just adding this to my HTML: <google-signin clientId="[my-client-id]" scopes="https://www.googleapis.com/auth/drive"></google-signin> The Sign-in button shows up on the page, but when I click it, I get the error: Cannot read property 'currentUser' of null I'm testing it out on just localhost, so...

Access html inside content tag in Polymer

polymer,web-component
I am trying to access the html that i wrote inside my own polymer-element but it isn't working. How can I achieve this? index.html <my-element> content I am trying to access </my-element> my-element.html <polymer-element name='my-element'> <template> <content id='content'></content> </template> <script> Polymer({ ready: function(){ console.log('html: '+this.$.content.innerHTML); } }); </script> </polymer-element> console...

Duplicate values with Polymer template repeat

templates,polymer,repeat,web-component
Okay any I have a strange thing happening with my polymer template <polymer-element name="my-playlist" attributes="info"> <template> <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json"> </core-ajax> <style> </style> <core-selector class="list"> <template repeat="{{k in data}}"> <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">...

Conditionally wrapping insertion points in Polymer

polymer,web-component
I am trying to make a Polymer element that is a simple box or container with 3 major elements: a header, body, and footer. The header and footer would be optional, but if they are there, I want to put stuff around them. My question is how to put a...

How to use polymer core-media-query to change element attribute

polymer,web-component
<core-toolbar class="tall" horizontal start-justified layout> <div class="logo"><img src="assets/logo.png"></div> <h1 class="bottom">Company name</h1> </core-toolbar> In the above code I have horizontal start-justified layout which mean the element within core-toolbar align to left. Now I want to change the start-justified to center-justified when screen size below 700px. How to do that with core-media-query...

Why doesn't Polymer insert the content?

javascript,html,polymer,web-component
I'm trying to understand the Web Components, so I want to create a web component that would "wrap" a select tag into the select2. Here's my main HTML: <html> <head> <title>Web components</title> <meta charset="utf-8"></meta> <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> <link rel="import" href="elements/select2-select.html"></link> </head> <body> <div> <select2-select> <option value="A">A</option> <option...

Yeoman Polymer for Polymer 0.8

javascript,polymer,web-component
I am using Yeoman to scaffold my Polymer project. I upgraded Polymer and everything else to 0.8-preview, and the application stopped working. What changes in the application should I do to make 0.8-preview working?...

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key

event-handling,polymer,web-component
I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

Web Component: How to access Shadow DOM through script in parent tag?

html5,web-component,shadow-dom
I want to access a tag in Shadow DOM using a JavaScript code which is loaded in the importing file. Say, my custom element has a div <div>I am custom element</div> I want to access this tag from the script that is loaded in the importing file of the custom...

Inheriting dimensions only if they are specified on the parent element

css,web-component,custom-element
I'm developing a bunch of custom elements for an API using a web components polyfill and I've hit a snag. One of the elements may contain an <img> or <canvas> element. If no dimensions are specified for the custom element, it should be the default size of the child element....

PolymerElements iron-ajax not posting data

polymer,web-component
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_token}; iron_ajax.generateRequest(); When I grab the $_POST variable and dump the contents to a file (after encoding them as json) I get [] (That means no data, zero, nothing). When...

Include markup in web component content insertion

web-component,shadow-dom
I have started to take a look at web components and the shadow DOM and have setup a simple demo. I have noticed that by setting an insertion point in my <template></template> and including it multiple times in the host it will iterate over each occurrence for one reference in...

React 0.12.2: “Error: Lower case component names (paper-button) are no longer supported in JSX”

polymer,reactjs,web-component,custom-element
I am trying to use a web component (paper-icon-button) in a React component and I am getting the following error: Error: Lower case component names (paper-button) are no longer supported in JSX" error: See http://fb.me/react-jsx-lower-case As of React 0.12, all lower-case tag names are interpreted as DOM elements vs. React...

Is it possible to set Polymer expressions dynamically?

polymer,web-component
I want to set filters dynamically. Is it possible? dynamicFilter is a variable with name of the Polymer expression. <template is="auto-binding"> <span>{{value | dynamicFilter}}</span> </template> ...

Styling custom HTML elements

css,web-component,shadow-dom,custom-element
I created a vanilla Custom Element: document.registerElement("my-el", { prototype: Object.create(HTMLElement.prototype) }); The element uses Shadow DOM and <style> tags inside it. However, I want to make users define the size of the custom element in the main style sheet. It works by referencing the custom tag, but is this the...