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 Vitals

highlight.js のハイライト処理を Web Workers で実行する

highlight.js のハイライト処理を Web Workers で実行する方法を紹介します。

Web

ウェブサイトを開いたら表示される「通知の表示」を求めるポップアップについて

ウェブサイトの「通知」機能について説明してます。

Chrome

Chrome 96 で絵文字を太字にすると色がなくなる問題

Chrome 96 で絵文字を太字にすると色がなくなる問題について書いています。

Web

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Web

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法について説明します。