mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] slots: properly handle named t-slots inside named t-slots
Previous code naively handled nested t-set-slots: if a second named slots was found, it overrode the first. In this commit, we use a set to make sure that we only use the first found t-set-slot node. Also, we ignore set-slots defined in a sub components, because these slots are only relevant to the sub component itself. Note that it works as expected because document.querySelectorAll performs a search depth first, so we will always use the named slots closer to the parent element, in term of depth. closes #682
This commit is contained in:
@@ -987,4 +987,69 @@ describe("t-slot directive", () => {
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span><p>sokka</p></span></div>");
|
||||
});
|
||||
|
||||
test("named slot inside slot", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-slot="brol"/>
|
||||
<t t-slot="default"/>
|
||||
</div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child>
|
||||
<t t-set-slot="brol">
|
||||
<p>A<t t-esc="value"/></p>
|
||||
</t>
|
||||
<Child>
|
||||
<t t-set-slot="brol">
|
||||
<p>B<t t-esc="value"/></p>
|
||||
</t>
|
||||
</Child>
|
||||
</Child>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
value = "blip";
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div><p>Ablip</p><div><p>Bblip</p></div></div></div>");
|
||||
});
|
||||
|
||||
test("named slots inside slot, again", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<child>
|
||||
<t t-slot="brol1">default1</t>
|
||||
<t t-slot="brol2">default2</t>
|
||||
<t t-slot="default"/>
|
||||
</child>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child>
|
||||
<t t-set-slot="brol1">
|
||||
<p>A<t t-esc="value"/></p>
|
||||
</t>
|
||||
<Child>
|
||||
<t t-set-slot="brol2">
|
||||
<p>B<t t-esc="value"/></p>
|
||||
</t>
|
||||
</Child>
|
||||
</Child>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
value = "blip";
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><child><p>Ablip</p>default2<child>default1<p>Bblip</p></child></child></div>"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user