diff --git a/doc/reference/slots.md b/doc/reference/slots.md index 7c9637ec..d9a64ec2 100644 --- a/doc/reference/slots.md +++ b/doc/reference/slots.md @@ -46,6 +46,8 @@ Here is how the `Navbar` component could be defined, with the `t-slot` directive ``` +Note that `t-slot` can only be used on a `` element. + ## Named slots Default slots are very useful, but sometimes, we may need more than one slot. diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts index 0bf572d9..49585004 100644 --- a/src/compiler/parser.ts +++ b/src/compiler/parser.ts @@ -798,6 +798,12 @@ function parseTSlot(node: Element, ctx: ParsingContext): AST | null { if (!node.hasAttribute("t-slot")) { return null; } + if (node.tagName !== "t") { + throw new OwlError( + `Directive 't-slot' can only be used on nodes (used on a <${node.tagName}>)` + ); + } + const name = node.getAttribute("t-slot")!; node.removeAttribute("t-slot"); let attrs: Attrs | null = null; diff --git a/tests/compiler/parser.test.ts b/tests/compiler/parser.test.ts index 52178251..b3ac6acf 100644 --- a/tests/compiler/parser.test.ts +++ b/tests/compiler/parser.test.ts @@ -1686,6 +1686,12 @@ describe("qweb parser", () => { }); }); + test("t-slot on a div tag should throw", async () => { + expect(() => parse(`
`)).toThrowError( + "Directive 't-slot' can only be used on nodes (used on a
)" + ); + }); + // --------------------------------------------------------------------------- // t-debug // ---------------------------------------------------------------------------