aurelia / aurelia/templating

A named slot cannot be used as content for the default slot of a child component

Open
#669 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
1.10.0

**Current behavior:**

**app.html**
Let's say we have an app, which uses the component `foo`, providing content for its named slots.
```html

App


1

2

```

**foo.html**
The component `foo` uses the component `bar`.
The content of the first slot in `foo` should be projected into the _default_ slot in `bar`.
The content of the second slot in `foo` should be projected into the named slot in `bar`.
```html

Foo




```

**bar.html**
The component `bar` has a default slot and a named slot, and presents the content of those.
```html

Bar


```

The result of the above looks like this - _note how the content of the first slot is lost_:

```
App Foo Bar
2
```

**Expected/desired behavior:**

* **What is the expected behavior?**

The result of the above _should_ like this:

```
App Foo Bar
1
2
```

For reference, here's the above, implemented using native Shadow DOM:
https://codepen.io/anon/pen/RzvZWB

* **What is the motivation / use case for changing the behavior?**

It should be possible to project the contents of a named slot in a component, into the default slot of a child component.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the app.html, foo.html, and bar.html templates from the report, then trace the slot projection behavior for a named slot used as a child component's default content. Add a regression test for the provided case; done means both 1 and 2 render in the expected order.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.