アンケート用カスタムタグライブラリ

カスタムタグライブラリのソースコードは次の通りです。
結構長いです。

<template id="QuestionBox">
	<div id="question-str" class="question-cell">
		<slot></slot>
	</div>
	<div class="question-cell">
		<input type="radio" name="rd-question" value="0">
		<input type="radio" name="rd-question" value="1">
		<input type="radio" name="rd-question" value="2">
		<input type="radio" name="rd-question" value="3">
		<input type="radio" name="rd-question" value="4">
	</div>
	<style>
	.question-cell {
		display: table-cell;
	}
	</style>
</template>
<script>
(function(){
	class QuestionBox extends HTMLElement {
		// write once
		// customElement.define()の前にセットする
		static set template(val){
			if(!this.tmpl){ this.tmpl = val; }
		}

		// cloneを返す
		static get template(){
			return document.importNode(this.tmpl.content, true);;
		}

		constructor(){
			super();
			const sr = this.attachShadow({mode: "open"});
			sr.appendChild(QuestionBox.template);
		}

		connectedCallback(){
			this.style.display = "table-row";

			// コンストラクタではvalueのsetterが未呼び出しなので失敗するためこのタイミングで行う
			this.defaultCheck();
		}

		// 初期状態で選択するラジオボタンを選ぶ
		defaultCheck(){
			let ipts = this.shadowRoot.querySelectorAll("input");
			let val = this.getAttribute("value");
			if(val == null){ val = 2; }
			ipts[val].checked = true;
		}

		// 選択されているラジオボタンの値を返す
		get value(){
			const ipts = this.shadowRoot.querySelectorAll("input");
			for(let i=0; i<ipts.length; i++){
				if(ipts[i].checked){
					return parseInt(ipts[i].value);
				}
			}
		}

		// 選択するラジオボタンを設定する
		set value(val){
			let ipts = this.shadowRoot.querySelectorAll("input");
			this.setAttribute("value", val);
			for(let i=0; i<ipts.length; i++){
				if(parseInt(ipts[i].value) == val){
					ipts[i].checked = true;
				}
			}
		}
	}

	// テンプレートを追加
	QuestionBox.template = document.currentScript.ownerDocument.getElementById("QuestionBox");
	customElements.define('question-box', QuestionBox);
})();
</script>

<template id="CategoryBox">
	<div class="title">
		<slot name="title"></slot>
	</div>
	<div class="questions">
		<slot></slot>
	</div>
	<style>
	.questions {
		display: table;
	}
	</style>
</template>
<script>
(function(){
	class QuestionCategory extends HTMLElement {
		// write once
		// customElement.define()の前にセットする
		static set template(val){
			if(!this.tmpl){ this.tmpl = val; }
		}

		// cloneを返す
		static get template(){
			return document.importNode(this.tmpl.content, true);;
		}

		constructor(){
			super();
			const sr = this.attachShadow({mode: "open"});
			sr.appendChild(QuestionCategory.template);
		}

		// 各質問の点数を合計する
		get total(){
			// slotに入っている要素はshadowRoot配下ではない！
			const qs = this.querySelectorAll("question-box");
			let t = 0;
			for(let i=0; i<qs.length; i++){
				t += qs[i].value;
			}
			return t;
		}

		// カテゴリ名を返す
		// <slot name="title">に設定された要素の文字列
		get catName(){
			return this.querySelector("[slot='title']").textContent.trim();
		}
	}

	// テンプレートを追加
	QuestionCategory.template = document.currentScript.ownerDocument.getElementById("CategoryBox");
	customElements.define("question-category", QuestionCategory);
})();
</script>

<template id="AllQuestions">
	<slot></slot>
	<div>
		<button id="TotalButton">集計</button>
	</div>
	<div id="TotalBox">
		<table>
			<thead>
				<tr>
					<th>カテゴリ</th>
					<th>合計</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	<style>
	#TotalBox {
		display: none;
	}
	</style>
</template>

<script>
(function(){
	class AllQuestions extends HTMLElement {
		// write once
		// customElement.define()の前にセットする
		static set template(val){
			if(!this.tmpl){ this.tmpl = val; }
		}

		// cloneを返す
		static get template(){
			return document.importNode(this.tmpl.content, true);;
		}

		constructor(){
			super();
			const sr = this.attachShadow({mode: "open"});
			sr.appendChild(AllQuestions.template);
		}

		connectedCallback(){
			// 作成時の結果テーブル作成
			this.makeResultTable();

			//　集計ボタンのイベントハンドラ登録
			const btn = this.shadowRoot.querySelector("#TotalButton");
			btn.addEventListener('click', function(){
				this.setResultTotal();
				this.shadowRoot.querySelector("#TotalBox").style.display = "block";
			}.bind(this));

			// 子要素追加時に結果テーブル再構築のため監視
			const mo = new MutationObserver(function(){this.makeResultTable()}.bind(this));
			mo.observe(this, {childList: true});
		}

		// 結果テーブル作成
		// 項目ごとに行を追加するが値は入らない
		makeResultTable(){
			const cats = this.querySelectorAll("question-category");
			let str = "";
			for(let i=0; i<cats.length; i++){
				str += `<tr><td>${cats[i].catName}</td><td id="val_${cats[i].catName}"></td></tr>`;
			}

			str += `<tr><td>合計</td><td id="val_total"></td></tr>`;
			this.shadowRoot.querySelector("tbody").innerHTML = str;
		}

		// 結果テーブルに集計を記入
		setResultTotal(){
			const cats = this.querySelectorAll("question-category");
			let t = 0;
			for(let i=0; i<cats.length; i++){
				const out = this.shadowRoot.querySelector(`#val_${cats[i].catName}`);
				out.textContent = cats[i].total;
				t += cats[i].total;
			}

			const total = this.shadowRoot.querySelector("#val_total");
			total.textContent = t;
		}
	}

	// テンプレートを追加
	AllQuestions.template = document.currentScript.ownerDocument.getElementById("AllQuestions");
	customElements.define("all-questions", AllQuestions);
})();
</script>

これを使うHTML部分は次の通りです。
非常にスッキリしていて良い感じです。
<script>内はJSによるカスタムタグの動的追加のテストのためです。

<all-questions>
	<question-category>
		<p slot="title">カテゴリ1</p>
		<question-box value="2"><p>質問1です</p></question-box>
		<question-box value="0"><p>質問2です</p></question-box>
	</question-category>
	<question-category>
		<p slot="title">カテゴリ2</p>
		<question-box value="2"><p>質問1です</p></question-box>
		<question-box value="2"><p>質問2です</p></question-box>
	</question-category>
</all-questions>
<script>
const qc = document.createElement("question-category");
const p = document.createElement("p");
p.slot = "title";
p.textContent = "カテゴリ3";
qc.appendChild(p);

for(let i=0; i<3; i++){
	const q = document.createElement('question-box');
	q.value = 1;
	q.innerHTML = `<p>質問${i}です。</p>`;
	qc.appendChild(q);
}

document.querySelector("all-questions").appendChild(qc);
</script>

このカスタムタグライブラリは3つのカスタムタグを定義しています。

ほとんどの部分は今までの記事で説明してきたことなので、ソースの細かい部分は説明しません。
これを作るにあたって悩んだ部分、今までの説明（他のサイトをで説明されていたのとは違うことをしなければならなかった部分）を説明します。

シャドウルートの構築

const sr = this.attachShadow({mode: "open"});
const clone = document.importNode(テンプレート.content, true);
sr.appendChild(clone);

const h = document.createElement("hoge-tag");
const f = document.createElement("fuga-tag");
h.appendChild(f);
document.getElementById("ToAdd").appendChild(h);

テンプレートの取得

const sr = this.attachShadow({mode: "open"});
const doc = document.currentScript.ownerDocument;
const tmpl = doc.getElementsById("some-template");
const clone = document.importNode(tmpl.content, true);
sr.appendChild(clone);

class AllQuestions extends HTMLElement {
	static set template(val){
		if(!this.tmpl){ this.tmpl = val; }
	}

	static get template(){
		return document.importNode(this.tmpl.content, true);;
	}

	// まだまだ続く...
}

// テンプレートを追加
AllQuestions.template = document.currentScript.ownerDocument.getElementById("AllQuestions");
customElements.define("all-questions", AllQuestions);

class AllQuestions extends HTMLElement { ...　}

// 非常に非合法感漂う方法でテンプレートを追加
AllQuestions.template = document.currentScript.ownerDocument.getElementById("AllQuestions");
customElements.define("all-questions", AllQuestions);

子要素追加の監視

// 子要素追加時に結果テーブル再構築のため監視
const mo = new MutationObserver(function(){this.makeResultTable()}.bind(this));
mo.observe(this, {childList: true});

// 子要素追加時に結果テーブル再構築のため監視
const mo = new MutationObserver(this.makeResultTable);
mo.observe(this, {childList: true});

<template>を使った、独自の機能を実装する必要のあるカスタムタグを作るときの注意点についてのまとめです。

シャドウルートの構築はconstructorでやったほうが良さそうです。
connectedCallbackでも上手く行きそうに思えますが、constructorの方が安心だと思います。

テンプレート用にstaticなgetter/setterを作ります。
setterはwrite onceにしておくと良いでしょう。
getterはテンプレートのcloneを返す様にしておくと使う側が楽です。

カスタムタグの子要素の変更はライフサイクルコールバックでは監視できません。
MutationObserverを使いましょう。