New one more more declarative templating syntax?

Following my previous post, I'd like to ask you what you think about the presented syntax?

It suppose to be as close to HTML as possible. But, the main difference between this and others is that it doesn't use any inline JS e.g. in for loops or if's. It suppose to be something complimentary to GlueDOM to let developers write HTML and only when necessary extend it with sandboxed JS.

The rationale behind making another syntax instead of using JSX can be found in this README.md. But in short is to have a unified way of writing UI components containing complex conditionals. JSX is cool but can easily get nasty.

<h1>Syntax Idea</h1>
<input-x type="text" name="firstName">
  <script>
    if (actionResults.setFirstNameInputVisible) {
      props.className = 'visible'
    }

    props.onClick = () => {

    }
  </script>
</input-x>

Comments

[Krishan111]

Sir can u tell me that how can l show colored code in code blocks on a website.
Thanks

[chris-czopp]

I guess prismjs.com/ could help you

[Krishan111]

Thankyou Sir You solved my problem

[chris-czopp]

Here is a little playground: codepen.io/Czopp/pen/oNzEMWr