The time is ${date.toString()}
`\nsetInterval(() => render(theTime(new Date()), document.body), 1000)\n```\n\n### Expressions\n\njtml interpolates placeholder expressions in special ways across the template. Depending on where you put a placeholder expression (the `${}` syntax is a placeholder expression) depends on what it does. _Importantly_ \"Attributes\" behave differently to \"Nodes\". Here is a comprehensive list:\n\n#### Attributes\n\nHTML Attributes can contain placeholder expressions, but these _must_ be inside the quoted part of the attribute. The name of an Attribute cannot use placeholder expressions, only the value.\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst className = `red-box`\n\nhtml`` // This is valid\n\nhtml`` // !! This is INVALID!\nhtml`` // !! This is INVALID!\n```\n\n##### Boolean Values\n\nIf an attribute maps to a [\"boolean attribute\"](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes), and the attribute value consists _solely_ of a placeholder expression which evaluates to a boolean, then this can be used to toggle the attribute on or off. For example:\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst input = (required = false) => html``\nconst div = (hidden = false) => html``\n\nrender(input(false), document.body) // Will render ``\nrender(input(true), document.body) // Will render ``\n\nrender(div(true), document.body) // Will render ``\nrender(div(false), document.body) // Will render ``\n```\n\n##### Multiple values, whitespace\n\nIf an attribute consists of multiple placeholder expressions, these will all be mapped to strings. Any included whitespace is also rendered as you might expect. Here's an example:\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst p = ({classOne, classTwo, classThree}) => html``\n\nrender(p({classOne: 'red', classTwo: 'box', classThree: ''}), document.body)\n// ^ Renders ``\n\nconst i = ({classOne, classTwo}) => html``\n\nrender(i({classOne: 'red', classTwo: 'box'}), document.body)\n// ^ Renders ``\n```\n\n##### Iterables (like Arrays)\n\nAny placeholder expression which evaluates to an Array/Iterable is joined with spaces (`Array.from(value).join(' ')`). This means you can pass in an Array of strings and it'll be rendered as a space separated list. These can still be mixed with other placeholder expressions or static values. An example:\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst p = ({classes, hidden = false}) => html`\n\nrender(p({classes: ['red', 'box'], hidden: true}), document.body)\n// ^ Renders ``\n\nrender(p({classes: ['red', 'box'], hidden: false}), document.body)\n// ^ Renders ``\n```\n\n##### Events\n\nIf an attributes name begins with `on`, and the value consists of a single placeholder expression that evaluates to a function, then this will become an Event Listener, where the event name is the attribute name without the `on`, so for example:\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst handleClick = e => console.log('User clicked!')\n\nrender(html``, document.body)\n// ^ Renders ``\n// Effectively calls `button.addEventListener('click', handleClick)`\n```\n\nThe event name can be any event name that is also possible as an attribute, for example `onloaded` will listen for the `loaded` event, `onwill-load` will bind to the `will-load` event. Special characters such as `:`s are not allowed as attribute names, and as such you cannot bind to an event name with these special characters using this pattern.\n\n#### Nodes\n\nPlaceholder expressions can also be put where an HTML node might be - in other words inside a tag, rather than inside an attribute. These behave differently to placeholder expressions inside attribute values:\n\n##### HTML Escaping\n\nAny HTML inside a string is automatically escaped. Values get added as `Text` nodes, meaning it is impossible to inject HTML unless you explicitly want to, making them safe for XSS. This is not manually handled by the library, but is core to the design - meaning the browser handles this escaping! An example:\n\n```js\nimport {html, render} from '@github/jtml'\n\nconst unsafe = ''\n\nrender(html`| Spanner | 5 |
| Wrench | 5 |