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">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div id="app"></div>
  <script type='module'>
    import { reactive, html } from '[email protected]/dist/index.min.mjs';

    const state = reactive({
      color: 'red'

      <button style="background-color: ${() => state.color}">click me</button>
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="${() =>}">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');

    style="${() => `background-color: ${state.backgroundColor}; color: ${state.color};`}"
    toggle style
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.

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


Issue Title Created Date Updated Date