Allow style:property to accept an object #7311
Description
Describe the problem
Though we've definitely come a long way with styling, I fell like the style:property solution slightly missed the mark.
The current implementation has this as the way to style something:
<div style:color="red" style:padding="1rem" style:margin="0 auto" style:... style:... style:... style:...></div>
Describe the proposed solution
Ideally, the solution would look something like the following:
<div style:multi={color: "red", padding: "1rem", margin:"0 auto", etc...}></div>
This would also allow the following to be accurate:
<script>
let multi = {color: "red", padding: "1rem", margin:"0 auto"}
</script>
<div style:multi></div>
Alternatives considered
Something I've been using if I need to do a lot of styling at once is using use:
<script lang="ts">
const styles = {
color: 'black',
padding: '1rem',
margin: '0 auto',
fontSize: '3rem'
}
const styling = (node: HTMLElement, styles: Record<string, string>) => {
Object.keys(styles).forEach(key=> node.style[key] = styles[key])
}
</script>
<div
use:styling={styles}
></div>
Importance
nice to have