Merge CSS class on Yielded Component

Lets say I am creating a UI library for general consumption, and I want to use composable components. For example, Lets say I have input and form components like so:


<input class="lib-input" ...attributes />


<form class="lib-form" ...attributes>
   {{yield (hash input=(component 'input' class="lib-form-input"))}}

And then I am creating an app that uses them like this:


<Form class="my-form" as |form|>
   <form.input class="my-form-input" />

What I would like is to have the following output:

<form class="lib-form my-form">
   <input class="lib-input lib-form-input my-form-input />

But I can’t get it to do that…my input is missing the “lib-form-input” class. Is there a way to make it work like this?

Looks like my use case might be related to this open RFC?

1 Like


If i were, I wouldn’t create components with global HTML tags names. It may be useful to use a prefix. For example

<NiltzForm as |nf|>
 <nf.text-field ...attributes />
 <nf.number-field ...attributes />
 <nf.input-field @type="" />