Web

1つのWebページに複数のHTML要素サンプルを記述する

投稿日:2021年10月14日 更新日:

1. はじめに

1つの Webページ上に、「部分的な HTMLとCSSのセット(以後、コンポーネントと呼びます)」を複数載せる方法を紹介します。

具体的には、ボタンのサンプルだったり、画像表示のサンプルだったり、そういったものです。

普通に書くと、それぞれのCSS(スタイル)が干渉する可能性があります。本記事の方法であれば、この問題は起きません。

2. 方法

Web Components を使って、それぞれのコンポーネントを隔離します。

手順は以下です。

(1) JavaScriptファイルの中に、コンポーネントを記述する

1つのコンポーネントを1つの JavaScriptファイルに記述します。

こんな感じです。

export default class extends HTMLElement {
    constructor() {
        super();
        const shadowRoot = this.attachShadow({
            mode: 'open'
        });
        shadowRoot.innerHTML = `
<style>
/* ここにスタイルを記述します */
:host {
  display: block;
  contain: content;
}
p {
  margin: 10px auto;
}
</style>
<!-- ここにHTMLを記述します -->
<div>
  <p>Hello, World!</p>
</div>
`;
    }
}
  • HTMLElement というクラスを拡張したクラスを定義し、それをエクスポートしています。
  • Element.attachShadow() メソッドを使って、シャドウ DOM ツリーを追加し、そこに CSS と HTML を記述しています。こうすることで、Webページ自体から独立したスコープになり、スタイルなどが干渉しなくなります。

(2) Webページの HTML ファイル側から、(1) の JavaScriptファイルを読み込んで利用する

作成した JavaScript ファイルを読み込んで利用するには、Webページを表す HTML に以下を記述します。

※ (1) で作成した JavaScript ファイルの名前を、my-element.js とします。

<script type="module">
import MyElement './my-element.js'

customElements.define('my-element', MyElement);
</script>
  • import を使い、JavaScript ファイルで定義したクラスを MyElement という変数に代入しています。
  • customElements.define() メソッドを使い、MyElement を “my-element” という名前のタグに紐づけています。HTMLの中で、<my-element> というタグが使えるようになります。このタグの名前はハイフンを含む必要があります。

(3) HTML 上で <my-element> タグを記述する

Webページの HTML 上の任意の場所で、<my-element> タグを記述します。

<my-element></my-element>

以上の操作により、JavaScriptファイル内に記述した HTMLが、<my-element> タグの部分に置き換わります。

同じ手順で、1つのWebページに複数のコンポーネントを表示することができ、その際、それぞれのCSS(スタイル)は干渉することがありません。

3. 関連

Web Components については、以下の記事も書いています。

Web Components

Web Components のサンプルコード

2019.12.06
Web Components

Web Components でスタイルシートを再利用する

2020.03.31
Web Components

Web Components の Slot について

2019.12.17
Web Components

Web Components: Shadow DOM に HTML と CSS をセットするいろいろな方法

2019.12.17
Web Components

Web Components: 組み込み要素を拡張する方法

2019.12.18
Web Components

Web Components: カスタム属性の利用方法

2019.12.18
Web

Web Components: CSS Shadow Parts の使い方

2020.03.28

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTML

HTMLの雛形 (CSS, JavaScriptも)

HTMLの雛形 (CSS, JavaScriptも) を載せています。コピーして使えます。

Web

URLリダイレクトの動作

URLリダイレクトの動きについて説明します。

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

Web

Webサイトに使用されている色のコントラストをチェックする

目次1. はじめに2. Webコンテンツで推奨されるコントラスト比3. コントラスト比をチェックすることができるサービス4. コントラスト比の問題を自動的に検知する 1. はじめに 本ページでは、We …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …