Ability to nest slots/parts

[GedMarc]

Hey,

With the WA-Page component, the slots seem to be needed on the exact children level from the wa-page, I'm finding it a bit tricky to create web components for these, as they are always in their own tag, with the slots beneath

Is it possible to allow nesting on the wa-page slots (search for immediate and children for the slot)

e.g.

<wa-page class="wa-theme-default-dark">
	<header class="wa-split" slot="header">
		<div class="wa-cluster">
			<img src="assets/logo.webp" style="width:28px;"/>
			<h3>Guiced EE</h3>
			<small>2.0.0</small>
			<wa-badge>alpha</wa-badge>
		</div>
		<div class="wa-cluster">
			<wa-button size="small" variant="brand">
				GitHub
			</wa-button>
			<wa-button size="small" variant="brand">
				Maven
			</wa-button>
			<wa-button appearance="outlined" size="small" variant="brand">
				Donate
			</wa-button>
		</div>
	</header>
	<nav slot="navigation">
		<a routerLink="/home">Home</a>
		<a routerLink="/usage">Usage</a>
		<a routerLink="/jlink">JLink</a>
		<wa-divider></wa-divider>
		<a routerLink="/inject">Injection</a>
		<a routerLink="/persistence">Persistence</a>
		<a routerLink="/vertx">Vert.X</a>
		<a routerLink="/rest">Rest</a>
		<a routerLink="/websocket">Websockets</a>
		<a routerLink="/webservice">Web Services</a>
		<wa-divider></wa-divider>
		<a routerLink="/mpconfig">MicroProfile Config</a>
		<a routerLink="/swagger">Swagger</a>
		<wa-divider></wa-divider>
		<a routerLink="/hazelcast">HazelCast</a>
		<a routerLink="/rabbit">Rabbit</a>
		<a routerLink="/cerial">Cerial</a>
		<wa-divider></wa-divider>
		<a routerLink="/services">Services</a>
	</nav>
<routerOutlet>

    <main-home-display>
        <header slot="main-header">bla bla bla</header>
        <main> </main>
        <footer slot="main-footer">footer bla</footer>
    </main-home-display>

</wa-page>

I do believe allowing children to also specify the part for the slot would resolve this, but i couldn't seem to be able to get it right?

[claviska]

Is it possible to allow nesting on the wa-page slots (search for immediate and children for the slot)

This is a platform limitation. Any slotted element must be a direct descendant of the host element. The reason for this is because you can technically attach a shadow root to any element, not just custom elements.

Thus, if a slotted element were nested like so:

<wa-page>
  <div>
    <span slot="main-header"></span>
  </div>
</wa-page>

It would technically belong to the <div>, not <wa-page>.

In your case, could you apply the slot attribute directly on your own custom elements instead?

[GedMarc]

Hmm, I see.

Well, I was thinking generally you would always swap at least the main header and main body with any navigation - requiring two replacements of div contents, this would still require the separation there,

Is there an easy way to swap out the main header, body and footer with a single call? in many instances as well, the aside would also require updating on navigation, making it a total of 4 content replacements,

The idea was to group these sort of navigations into a single item, to replace the screen.

If I have, a Home Page with custom header body and footer, and then swap it to say a detail page, the header content footer and aside should switch,
How can I accomplish this, without manual .html() replacements ? :)

[GedMarc]

My current route I am going is setting a .ts variable to a name, and then mass importing with if statements if that is selected, however it is very VERY VERY messy :)

[claviska]

I'm not sure I'm following. You can, however, slot multiple elements into the same slot, if that helps.

<wa-page>
  <span slot="main-header">First element</span>
  <span slot="main-header">Second element</span>
  <span slot="main-header">Third element</span>
</wa-page>

[GedMarc]

not really, when I navigate, I would like to swap 4 sections to new/different elements.

That is currently how I do it - filtering which one to show based on a variable that the navigation sets, however at a mere 6 navigations, the page rendering, especially on longer main bodies, is simply unmanageable.

How do we change out multiple slots in a single swoop, based on a component entry.
With MPA the screen refreshes and reloads the entire thing, maintaining this already isn't possible, it's just too big. With SPA, it is seemingly impossible to swap the 4 out with a single event, without manually manipulating the html of the element, as each web component is it's own tag.

If I have a component say "Home", it specifies header, body footer and aside
Same for "Detail".
Setting the slot attribute on the parent div, doesn't accomplish this, everything will just go into the main-header

[GedMarc]

mmm, and making each navigation a wa-page, while it would work actually, the design for navigation would be reverted, mm and the web component tag would have to inherit the 100% settings