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 Components

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

Constructable Stylesheet Objects の使い方を説明します。

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web

URLリダイレクトの動作

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

Web

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …