Element passed in many recursive slots not showing up in bottom level element

Using Polymer 1.* and shady dom with Chrome.

UPDATE: I can pass a element through 2 named slots but not 3. Does shady dom have a limit?

I am having issues passing special-form-element in <foo-two>'s slot="card-content" and making it show in the great grandchild elements <foo-card>'s <slot name="card-content"></slot>.

special-form-element

<foo-two>

slot="card-content"

<foo-card>

<slot name="card-content"></slot>

The card footer with <slot name="footer-action-right"></slot> shows the paper-buttons with no issues(so iron collapse is expanded as it should be). It's only the <slot name="card-content"></slot> that is not showing the special-form-element passed in through the many recursive slots.

<slot name="footer-action-right"></slot>

<slot name="card-content"></slot>

special-form-element

Any ideas what I am doing wrong to not make the special-form-element show in <foo-card>'s <slot name="card-content"></slot>?

special-form-element

<foo-card>

<slot name="card-content"></slot>

<dom-module id="foo-one">
<template>
<foo-two>
<special-form-element id="addForm" slot="card-content" client="[[client]]" entity="newEntity"></special-form-element>
</foo-two>
</template>
</dom-module>


<dom-module id="foo-two">
<template>
<foo-three id="addForm">
<paper-button slot="button" on-tap="goToGrid">Cancel</paper-button>

<div slot="card-content">
<slot id="addSlot" name="card-content"></slot>
</div>
</foo-three>
</template>
</dom-module>


<dom-module id="foo-three">
<template>
<bar-element></bar-element>

<foo-card hidden="[[bar]]">
<slot name="header-content"></slot>

<div id="addSlot" slot="card-content">
<slot name="card-content"></slot>
</div>

<div slot="footer-action-right">
<paper-button on-tap="_submitForm">Save</paper-button>
<paper-button
on-tap="_cancel"
hidden$="[[hideCancel]]"
slot="footer-action-right">
Cancel
</paper-button>

<slot name="buttonn"><slot>
</div>

</foo-card>
</template>
</dom-module>


<dom-module id="foo-card">
<template>
<div id="mainCard" class="sp6-paper-card">
<div class="card-header-bar" hidden="[[minimal]]">
<sp-letter-avatar hidden="[[noLetterAvatar]]" id="headerAvatar" width="40" height="40" name="[[name]]" label="[[label]]"></sp-letter-avatar>
<span class="card-title" hidden="[[_hideHeading(noLetterAvatar, heading)]]">[[heading]]</span>
<div class="layout horizontal">
<paper-icon-button icon="hardware:keyboard-arrow-down"
noink
hidden$="[[!collapsible]]"
id="collapseButton"
title="title"
on-tap="_expand">
</paper-icon-button>

<slot name="button"></slot>

</div>
</div>

<iron-collapse opened="[[!minimized]]">

<iron-collapse id="expandedContent" opened="[[expanded]]">
<div class="card-content">
<slot name="card-content"></slot>
</div>

<div class="card-footer" hidden="[[minimal]]">
<slot name="footer-action-left"></slot>
<div></div> <!-- flex filler -->
<slot name="footer-action-right"></slot>
</div>
</iron-collapse>

</iron-collapse>
</div>

</template>
</dom-module>


0

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy