Example where the paragraph is rendering with out referring to the layout is confusing

[Hakuz]

Please help me understand how this is working. How the paragraph is referring to the layout in the provided example in this page https://templ.guide/syntax-and-usage/template-composition

Components as parameters
Components can also be passed as parameters and rendered using the @component expression.

package main

templ heading() {

Heading

}

templ layout(contents templ.Component) {

@Heading()

@contents

}

templ paragraph(contents string) {

{ contents }

}

main.go
package main

import (
"context"
"os"
)

func main() {
c := paragraph("Dynamic contents")
layout(c).Render(context.Background(), os.Stdout)
}

[joerdav]

Hi, the answer is that the paragraph does not refer to the layout in anyway in this example. The composition happens in the main function.

templ layout(contents templ.Component) - the layout can take the function argument of a templ component.
templ paragraph(contents string) - paragraph is a simple component that just takes a string.

In the main function we create an instance of the paragraph component:

c := paragraph("Dynamic contents")

And then we pass this component into the layout, and render the result:

layout(c).Render(context.Background(), os.Stdout)