5px;
      border-color: green;
      height: 100px;
      background-color: hsl(calc(20 * var(--item-index)), 100%, 50%);
    }
    </style>
  </head>

  <body>
    <script src="/web-elements.js" defer></script>
    <script type="module">
    document.querySelector('x-list').addEventListener(
        'layoutcomplete',
        (e) => {
          console.log(e);
        },
      );
    </script>
    <x-view class="page">
      <x-list list-type="single">
        <list-item class="item" style="--item-index: 0