I have the following polymer:
<polymer-element name="popup-element" attributes="popupStyle">
<template>
<div class="popup" id="popup" style="{{popupStyle}}">
<div class="closebutton"></div>
<content select=".title"></content>
<br /><br />
<content></content>
</div>
</template>
<script type="text/javascript">
Polymer('popup-element');
</script>
</polymer-element>
Now I want to extend it in another polymer:
<polymer-element name="newfolder-element" attributes="popupStyle" extends="popup-element">
<template>
<shadow>
<span class="title">Utwórz nowy folder</span>
<input type="text" class="ginput" style="width: 350px; padding: 5px;" placeholder="Nowy katalog" />
<br />
<button class="action blue"><span class="label">Utwórz</span></button>
<button class="action red" id="cancelBtn" on-click="{{closePopup}}"><span class="label">Anuluj</span></button>
<content></content>
</shadow>
</template>
<script>
Polymer('newfolder-element');
</script>
</polymer-element>
Why content between <shadow> and </shadow> doesn't appear. I want to place content of <shadow> ... </shadow> (child element) to <content></content> of parent element. How to make it working ?
This used to be supported, but due to implementation concerns, it was removed. It will most likely be added in a future revision to the Shadow DOM spec.
Update: Here's a possible interim solution to this problem.
This almost makes the extends feature useless for template inheritance! I take a look at all the core-elements and paper-elements, rarely are they reusing templates from their base element. To get around this limitation I have to use a preprocessor like jade to mix-in partials. But if polymer or the spec can support this, it will be much more convenient. A little bit frustrating that I need to spend so much time just to fix something that should be there.
Related
While updating my polymer project from 1.x to 2.0 I encountered this problem
I am wrapping one of my custom elements in dom-repeat like this
Host
<dom-repeat items="{{customer.hubs}}" as="item">
<template>
<paper-card elevation="2" class="hubCard">
<div style="font-size: 25px;font-weight: bold;line-height: 48px">HUB [[printIndex(customer.hubs,index)]]</div>
<hub-info hub="{{item}}" isloading="{{isloading}}" refresh-customer="[[refreshCustomer]]"/>
</paper-card>
</template>
</dom-repeat>
part of the code of custom element is like below
Custom element
<div class="blueButton" id="debugTab" style="padding-top: 10px">
<dom-if if="{{displayDebugger}}">
<template>
<div class="headButton" on-click="toggleDebugger" id="debuggerTab">
<span>Debugger</span>
<span style="position: absolute;right: 2%">
<!--<i id="downArrow4" class="material-icons fa-arrow-down">keyboard_arrow_down</i>-->
<iron-icon id="downArrow4" icon="icons:arrow-drop-down"></iron-icon>
</span>
</div>
</template>
</dom-if>
<iron-collapse id="collapseDebugger" >
<hub-debugger hub-id="{{hub.hubId}}" isloading="{{isloading}}"></hub-debugger>
</iron-collapse>
</div>
Problem
First i tried to access iron-collapse as
this.$.collapseDebugger but i couldn't ,as i thought the custom elemrnt hub-info is inside dom-repeat i used this.shadowRoot.querySelector('#collapseDebugger') and accessed it.
Again i tried to access iron-icon (which is again dynamically created inside dom-if) as this.shadowRoot.querySelector('#downArrow4') but i am unable to access it.
How to access a dynamic node inside dynamic element?
What if there is nesting of dynamic creations?
The this.shadowRoot.querySelector(selector) syntax should work.
Is the conditional template actually rendered? Do you import polymer/lib/elements/dom-if.html in your custom element? This is needed, if you otherwise only import polymer/polymer-element.html.
Is it possible to have multiple slots in a custom component?
i.e.
<template>
<slot id="first"></slot>
<slot id="second"></slot>
</template>
Yes, but you should use name instead of id.
<template>
<div>
The first slot:
<div>
<slot name="slot1"></slot>
</div>
The second slot:
<div>
<slot name="slot2"></slot>
</div>
</div>
</template>
It's documented here for now: http://blog.durandal.io/2016/05/23/aurelia-shadow-dom-v1-slots-prerelease/ I'll be adding this to the content projection section of the Custom Elements documentation soon.
I'm using a conditional template to distribute content that is passed into the element. If the condition is true, it will show the first content element, otherwise the second. I noticed that when I update the condition the already distributed content is not updated. Once it is visible it will remain visible.
My first attempt looked like this:
<template is="dom-if" if="{{test}}">
<content select=".first">
</content>
</template>
<template is="dom-if" if="{{!test}}">
<content select=".second">
</content>
</template>
I noticed that it will work, if the content is wrapped in another element.
<template is="dom-if" if="{{test}}">
<div>
<content select=".first">
</content>
</div>
</template>
<template is="dom-if" if="{{!test}}">
<div>
<content select=".second">
</content>
</div>
</template>
I've created a plunker that demonstrates both cases.
Is there an explanation for this behaviour? Is it on purpose or a bug?
This is actually per design. Here`s what the Polymer team had to say on the issue on Github.
Hiding a <content> has no effect on the visibility of its distributed children (per spec), so your options are to wrap the content with a wrapper element that can be hidden (and will hide the distributed children), or use restamp which will pull the <content> out of the DOM all together.
It is slightly unintuitive that the restamp and non-restamp setups work differently, however it is a result of the non-restamp behavior which hides rather than destroying DOM as a performance optimization.
So, I have a Polymer project that is saving to Firebase. My data looks like this:
What I'm trying to do is loop through the teams property in the data. Considering Polymer only loops through Arrays right now, this is proving to be pretty challenging (since Firebase preferably returns data as objects). So far, I can loop through the keys and get the teams, but can't get into the teams to loop through it. Here is my code:
<template repeat="{{key in keys}}">
<div class="tile">
<paper-shadow z="2" class="card" animated>
<div id="header" class="header"></div>
<div class="content">
<p>{{data[key]}}</p>
<span>{{team.club}}</span>
</div>
<footer horizontal layout>
<paper-button id="teamview" on-tap="{{viewTeam}}" flex>VIEW</paper-button>
<span flex></span>
<paper-button id="teamDelete" on-tap="{{deleteTeam}}">DELETE</paper-button>
<paper-button id="teamEdit" on-tap="{{editTeam}}">EDIT</paper-button>
</footer>
</paper-shadow>
</div>
</template>
I feel like I've tried almost every scenerio. Every time I try and loop one more level with repeat="{{team in key}}" it breaks. Seeing if maybe some one else has a better perspective on this? Thanks in advance!
You need to bind the data, id and keys like this I think.
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../firebase-element/firebase-element.html">
<!--
Element providing solution to displaying value from firebase.
##### Example
<firebase-repeat-element></firebase-repeat-element>
#element fb-repeat-element
#blurb Element providing solution to displaying value from firebase.
#status alpha
#homepage http://basicelements.github.io/firebase-repeat-element
-->
<polymer-element name="firebase-repeat-element" attributes="firebaseName">
<template>
<firebase-element location="https://{{firebaseName}}.firebaseio.com/members/{{id}}" data="{{data}}" keys="{{keys}}"></firebase-element>
<template repeat="{{id in keys}}">
<h2>{{data[id]['name']}}</h2>
<img src="{{data[id]['image']}}">
</template>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
Be free to fork it #https://gist.github.com/ed2ba06d5a16d11381d9.git
So, the way I found out needs more in-depth explaining regarding Polymer and Firebase. First off, when you enter your location attribute in the firebase-element, whenever you are sourcing your data and keys, it is specifically with that location - not your data as a whole.
Therefore, the problem I was having was rooted in my location attribute. Once I changed my location to specify the exact nested level I wanted to push and source data from - all was well. The end code looked like this:
<firebase-element id="fbase"
location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams"
data="{{userTeams}}" keys="{{keys}}" dataReady="{{userReady}}">
</firebase-element>
<template repeat="{{key in keys}}">
<div class="content">
<p>{{userTeams[key]['team']}}</p>
<span>{{userTeams[key]['club']}}</span>
</div>
</template>
What this is doing is repeating through all the keys in the <firebase-element id="fbase"
location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams location (nothing more). From there I'm grabbing the team property in each key.
I am trying to define a custom polymer-element (groups-manager), which takes a JSON configuration, and produces its contents (a set of custom polymer-elements called generic-group):
<polymer-element name="groups-manager" attributes="display type config">
<template>
<content id="content" select="generic-group">
<template repeat="{{c in config}}">
<generic-group id="{{c.groupName}}" config="{{c}}" type="{{type}}">
</generic-group>
</template>
</content>
</template>
<script>
Polymer('groups-manager',{})
</script>
</polymer-element>
Although contained in a <content> node, my <generic-group> nodes become parts of the Shadow DOM.
Is there a way to have the <generic-group> nodes that are produced by the template, exposed in the light DOM?
You can add them with Polymer.dom(this).appendChild().
The nodes you add will be put in the light dom, and the <content> tag will display them into the element.