andyinabox/index.html

## index.html
<html><script type="module" src="https://gist.github.com/andyinabox/8f7514d111ae7ab78ddc45934a46b156/scratchpad.js"></script><scratchpad-main></scratchpad-main></html>

## scratchpad.js
const html = `<div id="scratchpad" contenteditable></div>`
const css = `
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
#scratchpad {
  font-family: 'EB Garamond', serif;
  max-width: 600px;
  margin: 1em auto;
  font-size: 20px;
}
`
class ScratchPad extents HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
    const wrapper = document.createElement('div');
    const style = document.createElement('style');
    wrapper.innerHTML = html;
    style.textContent = css;
    this.shadowRoot.append(style, wrapper);

  }
}

customElements.define('scratchpad-main', ScratchPad);

## url.txt
data:text/html;base64,PGh0bWw+PHNjcmlwdCB0eXBlPSJtb2R1bGUiIHNyYz0iaHR0cHM6Ly9naXN0LmdpdGh1Yi5jb20vYW5keWluYWJveC84Zjc1MTRkMTExYWU3YWI3OGRkYzQ1OTM0YTQ2YjE1Ni9zY3JhdGNocGFkLmpzIj48L3NjcmlwdD48L2h0bWw+
	const html = `<div id="scratchpad" contenteditable></div>`
	const css = `
	@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
	#scratchpad {
	font-family: 'EB Garamond', serif;
	max-width: 600px;
	margin: 1em auto;
	font-size: 20px;
	}
	`
	class ScratchPad extents HTMLElement {
	constructor() {
	super();
	this.attachShadow({mode: 'open'})
	const wrapper = document.createElement('div');
	const style = document.createElement('style');
	wrapper.innerHTML = html;
	style.textContent = css;
	this.shadowRoot.append(style, wrapper);

	}
	}

	customElements.define('scratchpad-main', ScratchPad);