oskude/html-ce-dir-tree.html

## html-ce-dir-tree.html
<html>
<head>
<title>experiment: html custom element directory tree</title>
<meta charset="utf-8"/>
<style>
body {
	font-family: monospace;
	font-size: 11pt;
}
foo-dir {
	--indentation: 1em;
}
</style>
<script>
class FooDir extends HTMLElement {
	constructor () {
		super();
		this.attachShadow({mode:"open"});
		this.shadowRoot.innerHTML = `
			<style>
				:host {
					display: block;
					user-select: none;
					margin-left: var(--indentation, 1.5em);
				}
				:host([open]) > label::after {
					content: "/";
				}
				label {
					display: block;
					font-weight: bold;
				}
				label:hover {
					background: #dddddd;
				}
			</style>
			<label></label>
			<slot></slot>
		`.trim().replace(/>\s+</g, "><");
		this._slot = this.shadowRoot.querySelector("slot");
		this._label = this.shadowRoot.querySelector("label");
		this._label.addEventListener("click", this.onClick.bind(this));
		this._slot.hidden = true;
	}
	static get observedAttributes () {
		return [
			"name",
			"open"
		];
	}
	attributeChangedCallback(name, oldValue, newValue) {
		switch (name) {
			case "name":
				this._label.textContent = newValue;
				break;
			case "open":
				if (newValue !== null) {
					this._slot.hidden = false;
				} else {
					this._slot.hidden = true;
				}
				break;
		}
	}
	get name ()	{
		return this.getAttribute("name");
	}
	set name (val) {
		this.setAttribute("name", val);
	}
	get open () {
		return this.hasAttribute("open");
	}
	set open (val) {
		if (val) {
			this.setAttribute("open", "");
		} else {
			this.removeAttribute("open");
		}
	}
	onClick (event) {
		this.open = !this.open;
	}
}
customElements.define("foo-dir", FooDir);
</script>
</head>
<body>

<foo-dir name="foo1">
	<foo-dir name="bar1">
		<foo-dir name="zap1"></foo-dir>
	</foo-dir>
</foo-dir>

</body>
</html>
	<html>
	<head>
	<title>experiment: html custom element directory tree</title>
	<meta charset="utf-8"/>
	<style>
	body {
	font-family: monospace;
	font-size: 11pt;
	}
	foo-dir {
	--indentation: 1em;
	}
	</style>
	<script>
	class FooDir extends HTMLElement {
	constructor () {
	super();
	this.attachShadow({mode:"open"});
	this.shadowRoot.innerHTML = `
	<style>
	:host {
	display: block;
	user-select: none;
	margin-left: var(--indentation, 1.5em);
	}
	:host([open]) > label::after {
	content: "/";
	}
	label {
	display: block;
	font-weight: bold;
	}
	label:hover {
	background: #dddddd;
	}
	</style>
	<label></label>
	<slot></slot>
	`.trim().replace(/>\s+</g, "><");
	this._slot = this.shadowRoot.querySelector("slot");
	this._label = this.shadowRoot.querySelector("label");
	this._label.addEventListener("click", this.onClick.bind(this));
	this._slot.hidden = true;
	}
	static get observedAttributes () {
	return [
	"name",
	"open"
	];
	}
	attributeChangedCallback(name, oldValue, newValue) {
	switch (name) {
	case "name":
	this._label.textContent = newValue;
	break;
	case "open":
	if (newValue !== null) {
	this._slot.hidden = false;
	} else {
	this._slot.hidden = true;
	}
	break;
	}
	}
	get name () {
	return this.getAttribute("name");
	}
	set name (val) {
	this.setAttribute("name", val);
	}
	get open () {
	return this.hasAttribute("open");
	}
	set open (val) {
	if (val) {
	this.setAttribute("open", "");
	} else {
	this.removeAttribute("open");
	}
	}
	onClick (event) {
	this.open = !this.open;
	}
	}
	customElements.define("foo-dir", FooDir);
	</script>
	</head>
	<body>

	<foo-dir name="foo1">
	<foo-dir name="bar1">
	<foo-dir name="zap1"></foo-dir>
	</foo-dir>
	</foo-dir>

	</body>
	</html>