examples/parts.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>LISS Example (Parts)</title>
	<script type="module">
		import LISS from '../index.js';

		class MyComponentA extends LISS() {

			constructor(htmltag) {
				super(htmltag)

				const span = document.createElement('span');
				span.setAttribute('part', 'foo');

				this.content.append(span);
			}
		}
		class MyComponentB extends LISS(HTMLTableRowElement) {

			constructor(htmltag) {
				super(htmltag);

				const td = document.createElement('td');
				td.setAttribute('part', 'foo');

				this.content.append( td );
			}
		}

		LISS.define('my-component-a', MyComponentA);
		LISS.define('my-component-b', MyComponentB);

		await LISS.whenDefined('my-component-a');
		let elem = document.querySelector(`my-component-a`);
		let part = elem.getPart("foo");
		part.textContent = "Hello";
		console.log("A", elem.getParts("foo"));

		await LISS.whenDefined('my-component-b');
		elem = document.querySelector(`tr[is="my-component-b"]`);
		part = elem.getPart("foo");
		part.textContent = "World";
		console.log("B", elem.getParts("foo"));
	</script>
</head>
<body>
	<my-component-a></my-component-a>
	<table>
		<tr is="my-component-b"></tr>
	</table>
</body>
</html>