Function attr

A wrapper used with addTo to make the binding set attributes instead of properties on the bound element.

Example

import { addTo, attr } from 'deleight/dom/components'
import { apply } from 'deleight/dom/apply'
import { sets } from 'deleight/object/shared'

document.body.innerHTML = `
<div>I am a div</div>
<p>I am a paragraph</p>
<section>I am a section <button>Btn1</button></section>
<article>I am an article <button>Btn2</button></article>
`;

const obj = { };    // a reactive object

apply({ 
    section: { button: addTo(obj, 'a', attr) }, 
    article: { button: addTo(obj, 'color', 'styles') } 
});

sets(obj, 'yellow');
// document.querySelector('button').getAttribute('a');   // yellow
// document.body.lastElementChild.lastElementChild.style.color;  // yellow

sets(obj, 'green');
// document.querySelector('button').getAttribute('a');   // green
// document.body.lastElementChild.lastElementChild.style.color;  // green
Copy