1.23.0 (10 Nov 2021)

<script $inline> runs scripts while rendering

To add logic to your component, add any JavaScript inside <script $inline>. This runs when the component is rendered.

<template $name="repeat-script" icon="X" value="30">
  <script $inline>
    let count = +value
    let result = isNaN(count) ? 'error' : icon.repeat(count)
  </script>
  ${result}
</template>

When you add the component to your page:

<repeat-script icon="★" value="8"></repeat-html>
<repeat-script icon="★" value="a"></repeat-html>

... it renders this output:

★★★★★★★★ error

Note:

• Add return anywhere in the script to stop rendering a component.
  (Set {parserOptions: {ecmaFeatures: {globalReturn: true}}
  to avoid ESLint errors.)

Security fix

Earlier, x:number, y:boolean, etc were parsed as JavaScript. If you component.setAttribute('x', userInput.value), and userInput.value had JavaScript, it would be executed. Now, the values for :number, :boolean, etc must be JSON. Only the :js type is evaluated as JavaScript.