ウェブコンポーネントを使って静的サイトのサイトフレームを共通化する | 投稿一覧

2023.2.28

やりたいこと

静的サイトのサイトフレームを、iframeやSSIを使わずに共通化したい。
CSSはウェブコンポーネントの中身にも適用したい。（カプセル化したくない）

コード

JavaScript

// cm-layout カスタム要素を作成
customElements.define('cm-layout', class extends HTMLElement {
	constructor() {
		super();
		// ページによって変わるところは属性プロパティで渡す
		const h1 = this.getAttribute('h1');
		// shadow root はつくらないで直接HTMLを書き換える
		this.innerHTML = `
			<header>ヘッダー</header>
			<main>
				<h1>${h1}</h1>
				${this.innerHTML}
			</main>
			<footer>フッター</footer>
		`;
	}
});

HTML

<body>
	<cm-layout h1="h1タイトル">
		<p>ここにコンテンツを入れる</p>
	</cm-layout>
</body>

CSS

cm-layout {
	/* 1階層深くなるのでカスタム要素は消す */
	display: contents;
}

補足

サイトフレーム部分のHTMLをJavaScriptに書くので、エディターのシンタックスハイライトがきかないのはちょっとやりづらい。