Web developer and autodidact with an interest in creative coding.
Published
Edited
Jul 20, 2019
5 stars
html`<div title="${ title }">Some text`
view( html`<div title="${ title }">Some text` )
view( html`<div title="${ DOM.text(title) }">Some text` )
{ // Variant: Create element with content, then set attribute.
const n = html`<div>Some text`;
n.setAttribute('title', title);
return view( n );
}
{ // Variant: Create element with attribute, then set content.
const n = DOM.element('div', {title});
n.textContent = 'Some text';
return view( n );
}
function safe(text) {
const map = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''};
return text.replace(/[&<>"']/g, c => map[c]);
}
function attr(element, attributes) {
return Object.entries(attributes).reduce((n, [k, v]) => (n.setAttribute(k, v), n), element);
}
view( html`<div title="${ safe(title) }">Some text` )
view( attr(html`<div>Some text`, {title}) )
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
