Props, complex data and slot in HTML

Stencil
1

Hi everyone,

is there a way to pass down to a web component some complex props (like object or array) directly in the HTML ?

In fact I’m trying to do the following:

<step-progress steps='["Profile", "Experience", "Objective"]'></step-progress>

But I’m not getting the array in my render function of the component.
Or must I define the step prop as a string and use JSON.parse myself ?

Another similar problem I have, is with the slot functionnality.

If I call my component like this in HTML:

<custom-grid col="3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</custom-grid>

Am I able to iterate over the divs ?
For exemple I would like to have final output like this:

<custom-grid col="3">
 <div class="row">
   <div class="col-4"><div>Item 1</div></div>
   <div class="col-4"><div>Item 2</div></div>
   <div class="col-4"><div>Item 3</div></div>
 </div>
</custom-grid>

Or any suggestion to create some similar component (items content are rendered serveur side) ?

Thanks in advance :slight_smile:

2

You could pass a JSON.stringify(Object) and the use JSON.parse(receivedJsonString) to pass array.
Also… In stencil, is it possible to interpolate values? like : {{}}, if so you could do it too.

3

Thanks for your reponse.
In fact I ended doing JSON.parse because you can’t do interopolation in your web component call (calling inside the index.html).

1 Like