Using named slots in parent layout

Flow
1

Hi,

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

2

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:
https://www.polymer-project.org/2.0/docs/devguide/shadow-dom

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

**shadow tree:
**

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

**light tree:
**

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

17188846.png

3

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:

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

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

@Tag("example-template")
@HtmlImport("src/example-template.html")
@Route(value = "example", layout = ParentLayout.class)
public class ExampleTemplate extends PolymerTemplate<ExampleTemplate.ExampleModel> {
....
}

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

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.

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

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 ?

Thanks,
Silvestru

4

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.

5

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.