Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Object support for the `style` attribute.

See original GitHub issue

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

1

<!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/core@1.0.0-alpha.5/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>

Issue Analytics

  • State:open
  • Created 10 months ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
atellmercommented, Dec 1, 2022

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'))
0reactions
rallucommented, Dec 2, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML object style Attribute - Dofactory
The style attribute specifies the style, i.e. look and feel, of the <object> element. A style contains any number of CSS property/value pairs,...
Read more >
The Style Information element - HTML - MDN Web Docs
This attribute defines which media the style should be applied to. Its value is a media query, which defaults to all if the...
Read more >
HTML style Attribute - W3Schools
The style attribute specifies an inline style for an element. The style attribute will override any style set globally, e.g. styles specified in...
Read more >
Support both object and string as value for style attribute. #756
You should be able to use a string or an object to set the style attribute of an element now! With a string....
Read more >
How To Modify Attributes, Classes, and Styles in the DOM
Attributes are values that contain additional information about HTML elements. They usually come in name/value pairs, and may be essential ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

When reload the page react-fast-marquee is accelarating

Next page

Compiled version uses ES6 syntax (=>)