Allow arbitrary access to HTML element IDL attributes

This issue has been tracked since 2022-11-30.

If I try to make a reactive style value, then the value of the CSS property in the style attribute is overwritten.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>arrow-js</title>
</head>
<body>
  <div id="app"></div>
  <script type='module'>
    import { reactive, html } from 'https://unpkg.com/@arrow-js/[email protected]/dist/index.min.mjs';

    const state = reactive({
      color: 'red'
    });

    html`
      <button style="background-color: ${() => state.color}">click me</button>
    `(document.getElementById('app'))
  </script>
</body>
</html>

justin-schroeder wrote this answer on 2022-11-30

reactive values cannot be applied to HTML partials only to entire attributes.

justin-schroeder wrote this answer on 2022-11-30

Perhaps it would be nice to support style objects:

const data = r({
  style: {
    backgroundColor: 'red'
  }
})
<button style="${() => state.style}">click me</button>

atellmer wrote this answer on 2022-12-01

Thanks. I realized that I can do this and it will work.

const state = reactive({
  backgroundColor: 'red',
  color: 'yellow'
});

const handleClick = () => {
  state.backgroundColor === 'red' ? (state.backgroundColor = 'yellow') : (state.backgroundColor = 'red');
  state.color === 'red' ? (state.color = 'yellow') : (state.color = 'red');
}

html`
  <button
    style="${() => `background-color: ${state.backgroundColor}; color: ${state.color};`}"
    @click="${handleClick}">
    toggle style
  </button>
`(document.getElementById('app'))

rallu wrote this answer on 2022-12-02

Would be nice to have for any attribute. I have web components that have array, object or function type of attributes.

For example if we have a web component that would render dropdown based on options attribute that had array of values in dropdown.

html`<my-dropdown options="${['one', 'two', 'three']}"></my-dropdown>`

justin-schroeder wrote this answer on 2022-12-02

@rallu since HTML can only have strings as attributes — would you expect this to perform some kind of JSON.stringify() and then you would decode that in your web component?

rallu wrote this answer on 2022-12-02

It's true that HTML supports only strings as attributes, but DOM HTMLElement supports any type of attributes.

I was hoping I could set these attributes easily with arrow. Now I have to get reference to element and set the attribute value with JS

JSON stringify is just bad design. Not going to use that.

Lit has solved this by having dot notation in templates. https://lit.dev/docs/templates/expressions/#property-expressions

Your Name

Your Comment

More Details About Repo

Owner Name	justin-schroeder
Repo Name	arrow-js
Full Name	justin-schroeder/arrow-js
Language	TypeScript
Created Date	2022-11-08
Updated Date	2023-03-28
Star Count	1240
Watcher Count	21
Fork Count	22
Issue Count	7

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date