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

メールアドレスが公開されることはありません。

関連記事

Web

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問です。

Web

Webページを検証する各種サービス

Webページを検証する各種サービスを紹介します。

Web

.htaccess ファイルにはWebアクセスできないようになっている

.htaccess ファイルにはWebアクセスできないようになっているという話です。

Web

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。