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に書くので、エディターのシンタックスハイライトがきかないのはちょっとやりづらい。
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に書くので、エディターのシンタックスハイライトがきかないのはちょっとやりづらい。