← Back to context Comment by marwis 3 years ago It's always been possible:<script>document.write(`<p>foo</p>`)</script> 2 comments marwis Reply agumonkey 3 years ago Good point, but it's very different in terms of thinking. Same as structural versus string macros in programming languages. marwis 3 years ago You can do it with custom elements, e.g. <dom-calc> const p = document.createElement('button'); p.innerText = 'hi'; p.onclick = () => alert('hi'); return p; </dom-calc> For something like: class CalcElement extends HTMLElement { connectedCallback() { setTimeout(() => { const fn = new Function(this.innerText); this.replaceWith(fn()); }, 0); } } customElements.define('dom-calc', CalcElement);
agumonkey 3 years ago Good point, but it's very different in terms of thinking. Same as structural versus string macros in programming languages. marwis 3 years ago You can do it with custom elements, e.g. <dom-calc> const p = document.createElement('button'); p.innerText = 'hi'; p.onclick = () => alert('hi'); return p; </dom-calc> For something like: class CalcElement extends HTMLElement { connectedCallback() { setTimeout(() => { const fn = new Function(this.innerText); this.replaceWith(fn()); }, 0); } } customElements.define('dom-calc', CalcElement);
marwis 3 years ago You can do it with custom elements, e.g. <dom-calc> const p = document.createElement('button'); p.innerText = 'hi'; p.onclick = () => alert('hi'); return p; </dom-calc> For something like: class CalcElement extends HTMLElement { connectedCallback() { setTimeout(() => { const fn = new Function(this.innerText); this.replaceWith(fn()); }, 0); } } customElements.define('dom-calc', CalcElement);
Good point, but it's very different in terms of thinking. Same as structural versus string macros in programming languages.
You can do it with custom elements, e.g.
For something like: