JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/webcompose@latest/dist/webcompose.min.js"></script>
<fruit-list></fruit-list>
<fruit-list fruit='["avocado","tomato"]'></fruit-list>

JavaScript

const { ComposableElement, html, repeat} = window.webcompose

class FruitList extends ComposableElement {
  static get observedAttributes() {return ['fruit']; }

  static get properties() {
    return {
      fruit: {type:Array, value:["apples","oranges","bananas"], attr:"fruit"},
    }
  }

  static render({fruit}){
  	const fruitList = repeat(
    	fruit,
      (i) => i,
      (i, index) => html`<div>${index+1}. ${i}</div>`
    );
    return html`
      <h1>Fruits</h1>
      ${fruitList}
    `
  }
}

customElements.define("fruit-list", FruitList);