Using named slots in parent layout


I have a common layout, created using Polymer Template, that is used by multiple views, again based on Polymer templates, and the views will add components in different sections of the parent layout - the sections to be populated are defined using slots, with different names. The issue I encounter is that the named slots are not populated and no error occurs.

If I have only a default slot in the parent layout, everything works OK and it gets populated but even if I have only one slot with a name, nothing happens.

Is this the correct behavior or am I doing something wrong ?

Thanks, Silvestru

Hi Silvestru,

I think the problem is that you are not specifying the slot when you want to place the content.

This link is really useful to understand how slots works:

Below there is an example about how to use the slots:

**shadow tree:

	<h1>Generic Slot:</h1>
	<slot> </slot>
	<h1>Title slot:</h1>
	<slot name="titleSlot"></slot>
	<slot name="contentSlot"></slot>

**light tree:

	<h3>I am in the generic slot</h3>
	<h3 slot="titleSlot">Title</h3>
	<h3 slot="contentSlot">contentSlot</h3>


Hi Diego,

First of all, thank you for your response and for the docs link that helped me understanding better the concepts.

Unfortunately it is not the issue you mention above, I specify the slot when I want to place content. Let me give you more details.

I have a parent-layout with the following definition:

	    <div class="title" hidden$="{{toggleTitle}}">Title</div>
	    <vaadin-button id="toggleTitleButon" on-click="_toggleTitle" theme="raised tertiary">Toggle Title</vaadin-button>
	    	<slot name="firstSlot"></slot>
        	<slot name="secondSlot"></slot>

What I tried was to define a view, let’s call it example-template with the following Java class and Polymer template:

@Route(value = "example", layout = ParentLayout.class)
public class ExampleTemplate extends PolymerTemplate<ExampleTemplate.ExampleModel> {
	<div slot="firstSlot">First slot - example template</div>
	<div slot="secondSlot">Second slot - example template</div>

In this case, my expectation was to see the texts from example-template displayed on the screen, on the afferent slots but it doesn’t happen.

If I remove layout = ParentLayout.class from ExampleTemplate class and I update the template as below, it works as expected.

	        <div slot="firstSlot">First slot - example template</div>
	        <div slot="secondSlot">Second slot - example template</div>

Unfortunately, this second approach has a disadvantage, it doesn’t keep the state of the ParentLayout when navigating between different routes.

Do you have any suggestion ?


When the ParentLayout.class is used with route, what is the output structure?

I know that RouteLayout only accepts a single component so at the parent level only a single component containing the two Div’s will be added. Wondering if that’s causing the error placing the content in the Slots.

Having similar issues.

Indeed, when using “@Route(value = “example”, layout = ParentLayout.class)”, the output structure shows as a child for , which is the root element. This, combined with fact that slot is looking only at the top-level children, results in example-template contained slots not being displayed properly.
If you set the slot attribute at example-template level then example-template is displayed on the slot you specified but this means you cannot populate different named slots of a parent layout from a single child.