3

I'm creating some sort of universal component to use it in React projects and in some old-fashioned Bootstrap + PHP ones.
So, I have a design like this.

enter image description here

As you can see it has repeated parts on the left and right sides. And I'm wondering to make it as much dynamically rendered as possible, kinda React's render props but which can be used in plain HTML + vanilla JS.
For example: in some cases there may no be an icon, in other - there may be a secondary text row and so on.

Previously I created a Data Grid component w/ dynamic render:

<campaign-table>
  <campaign-head>
    <campaign-cell numeric>ID</campaign-cell>
    <campaign-cell>Name</campaign-cell>
    <campaign-cell size="2">Description</campaign-cell>
  </campaign-head>
  <campaign-body>
    <template>
      {{#each items}}
      <campaign-cell numeric>ID: {{ id }}</campaign-cell>
      <campaign-cell> Name - <strong>{{ name }}</strong> </campaign-cell>
      <campaign-cell>ℹ️ {{ description }}</campaign-cell>
      {{/each}}
    </template>
  </campaign-body>
</campaign-table>

And CampaingBody component has method:

  componentWillLoad() {
    this.template = this.el.querySelector('template');
    this.renderTemplate = hbs.compile(this.template.innerHTML);
  }

Where hbs is Handlebars package. But it seems that all those VDOM magic is broken when I'm using this trick.

So, I'm curious is there any way achieve this in "Stencil" way? If every slot knows necessary data it will be able to render it correctly.

How to pass data into Stenciljs slots?

Simon Hänisch
  • 4,740
  • 2
  • 30
  • 42
Ivan Burnaev
  • 2,690
  • 18
  • 27
  • I'm sorry, but I haven't fully understood your concern yet. The HTML you are presenting is your current React implementation? If I understand you correctly, your question is about how to get the data from react into the stencil component and how to display it as in your image. – Christian Meyer Dec 11 '19 at 16:08
  • Yeah, since Stensiljs uses JSX it's hard to notice difference between React and Stencil itself. But it's not React implementation, it's Stencil component with `dynamic` render of its child nodes. My point is about dynamic render which wouldn't "break" VDOM. It's kinda render props, but I can't use them because this component should work in plain HTML+JS as well. – Ivan Burnaev Dec 12 '19 at 12:23

1 Answers1

0

You can build a config file with data and target and then run a loop

@Prop() config = [{
    name: 'test-slot-name',
    value: 'hello world'
}];
@Element() hostElement: HTMLStencilElement;

componentWillLoad() {
    this.config.forEach(entry => {
        let element = this.hostElement.querySelector('[slot="'+entry.name+'"]');
        element.value = entry.value;
    });
}
Stanley85
  • 389
  • 1
  • 5
  • 7