Is it possible to custom restyle elements in {active_elements} property?

[Youjin1985]

Hello!
I have this

<div class="ptable_container">
	<PeriodicTable tile_props={{ onclick }} {active_elements} />
</div>

Could you please tell is there easy way provided by component to make this white outline black? Or restyle it otherwise to make it clearly seen. I only can inspect that for active element property
border: 1px solid transparent;
is removed when I click on it

[janosh]

see the new "Active Elements Border Styling" example on https://matterviz.janosh.dev/periodic-table

<script>
  let active_elements_demo = $state([`H`, `C`, `N`, `O`, `Fe`, `Cu`, `Au`, `Ag`])
  let active_tile_border = $state({ width: `2px`, style: `solid`, color: `#ff0000` })
</script>

<PeriodicTable
  tile_props={{ show_name: window_width > 800 }}
  active_elements={active_elements_demo}
  style={`--elem-tile-active-border: ${active_tile_border.width} ${active_tile_border.style} ${active_tile_border.color}`}
  {onenter}
>
  {#snippet inset()}
    <TableInset
      style="display: flex; gap: 1em; place-content: center; flex-wrap: wrap; align-items: center"
    >
      <select bind:value={active_tile_border.width}>
        <option>1px</option>
        <option>2px</option>
        <option>3px</option>
      </select>
      <select bind:value={active_tile_border.style}>
        <option>solid</option>
        <option>dashed</option>
        <option>dotted</option>
      </select>
      <input type="color" bind:value={active_tile_border.color} style="height: 1.5em" />
      <code style="background: var(--sms-ui-bg); padding: 4px 8px; border-radius: 4px">
        {active_tile_border.width} {active_tile_border.style} {active_tile_border.color}
      </code>
    </TableInset>
  {/snippet}
</PeriodicTable>