カスタム要素 v1 - 再利用可能なウェブ コンポーネント

ウェブ デベロッパーは、カスタム要素を使用して、新しい HTML タグの定義、既存のタグの拡張、再利用可能なウェブ コンポーネントの作成を行うことができます。

カスタム要素を使用すると、ウェブ デベロッパーは新しい HTML タグを作成できます。 既存の HTML タグを強化する、他の開発者が使用しているコンポーネントを拡張する 表示されます。API はウェブの基盤 コンポーネントをご覧ください。ウェブ アプリケーションを 標準ベースの方法で、再利用可能なコンポーネントを 標準的な JS/HTML/CSS です。その結果、コードやモジュラー コードが減り、コードを再利用しやすく 説明します。

はじめに

このブラウザは、ウェブ アプリケーションを構造化するための優れたツールを提供します。です。 説明します。聞いたことがあるかもしれません。宣言型でポータブルであり、 簡単に使用できますHTML の語彙と表現は 拡張性に限界があります。HTML 生活 Standard には従来から、 自動的にマークアップと関連付けられるようになります...

カスタム要素は HTML をモダナイズするための手段であり、不足している要素を埋める 構造を動作にバンドルしますHTML に カスタム要素を作成できますカスタム 要素は、HTML の利点を保ちながら、ブラウザに新しいトリックを教えます

新しい要素の定義

新しい HTML 要素を定義するには、JavaScript が必要です。

customElements グローバルは、カスタム要素の定義と指示に使用されます。 新しいタグについてブラウザに 通知しますタグ名を指定して customElements.define() を呼び出す ベース HTMLElement を拡張する JavaScript class を作成します。

- モバイル ドロワー パネル <app-drawer> を定義する場合:

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});

使用例:

<app-drawer></app-drawer>

カスタム要素の使用は、 <div> などの要素を使用します。インスタンスはページで宣言できます イベント リスナーのアタッチなどが可能です。Keep は その他の例をご覧ください。

要素の JavaScript API を定義する

カスタム要素の機能は、ES2015 class これは HTMLElement を拡張したものです。HTMLElement を拡張すると、カスタム要素が DOM API 全体が継承されるということは、 クラスが要素の DOM インターフェースの一部になります。基本的に、クラスを使用して タグ用の公開 JavaScript API を作成します。

- <app-drawer> の DOM インターフェースを定義する場合:

class AppDrawer extends HTMLElement {

  // A getter/setter for an open property.
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    // Reflect the value of the open property as an HTML attribute.
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
    this.toggleDrawer();
  }

  // A getter/setter for a disabled property.
  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    // Reflect the value of the disabled property as an HTML attribute.
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Can define constructor arguments if you wish.
  constructor() {
    // If you define a constructor, always call super() first!
    // This is specific to CE and required by the spec.
    super();

    // Setup a click listener on <app-drawer> itself.
    this.addEventListener('click', e => {
      // Don't toggle the drawer if it's disabled.
      if (this.disabled) {
        return;
      }
      this.toggleDrawer();
    });
  }

  toggleDrawer() {
    // ...
  }
}

customElements.define('app-drawer', AppDrawer);

この例では、open プロパティ disabled を持つドロワーを作成しています。 プロパティ、toggleDrawer() メソッドが含まれます。また、プロパティを HTML として反映 属性です

カスタム要素の便利な機能の 1 つは、クラス定義内での this です。 DOM 要素自体、つまりクラスのインスタンスを参照します。Google の たとえば、this<app-drawer> を参照します。これ(😉?)が要素の仕組みです click リスナーを自身にアタッチするイベント リスナーに限定されません。 要素のコードでは DOM API 全体を使用できます。this を使用して以下にアクセスします。 要素のプロパティ、その子の検査(this.children)、クエリノード (this.querySelectorAll('.items'))など

カスタム要素の作成に関するルール

  1. カスタム要素の名前にはダッシュ(-)が必要です。したがって、<x-tags><my-element><my-awesome-app> はすべて有効な名前で、<tabs> は有効な名前です。 <foo_bar> ではありません。この要件は、HTML パーサーが カスタム要素と通常の要素を区別します。また、ファイアウォール ルールを 互換性を保つことができます。
  2. 同じタグを複数回登録することはできません。関連付けようとすると、 DOMException をスローする。新しいタグをブラウザに設定すれば できます。取り消しは不要。
  3. カスタム要素は HTML で許可されるのはごく一部に限られるため、自動的に終了することはできません。 要素 自己終了型になります。必ず終了タグを記述する (<app-drawer></app-drawer>).

カスタム要素のリアクション

カスタム要素では、呼び出し中にコードを実行するための特別なライフサイクル フックを定義できます。 当時は興味深い存在でしたこれらはカスタム要素と呼ばれます。 リアクションできます

名前 呼び出されるタイミング
constructor 要素のインスタンスは、 作成またはアップグレードされます。データの初期化に便利 イベント リスナーの設定 シャドードームをつくることです。 詳しくは、 <ph type="x-smartling-placeholder"></ph> spec をご覧ください。constructor
connectedCallback 呼び出されるたびに 要素が DOM に挿入されます。次のようなセットアップ コードを実行するのに便利です。 リソースの取得やレンダリングに かかる時間のことです通常は、処理を遅らせるために お見せしましょう。
disconnectedCallback 要素が DOM から削除されるたびに呼び出されます。対象ユーザー クリーンアップします
attributeChangedCallback(attrName, oldVal, newVal) 監視対象の属性が 追加、削除、更新、置換されます。初期値でも呼び出される 要素がパーサーで作成されたとき、または アップグレード済み注: observedAttributes プロパティにリストされている属性が このコールバックを受信します。
adoptedCallback 「 カスタム要素が新しい document(例: document.adoptNode(el) という連絡先です)。

リアクション コールバックは同期しますel.setAttribute() に電話した場合 要素があると、ブラウザは直ちに attributeChangedCallback() を呼び出します。 同様に、要素の直後に disconnectedCallback() を受け取ります。 DOM から削除されます(ユーザーが el.remove() を呼び出す場合など)。

例: <app-drawer> にカスタム要素のリアクションを追加する場合:

class AppDrawer extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.
    // ...
  }

  connectedCallback() {
    // ...
  }

  disconnectedCallback() {
    // ...
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    // ...
  }
}

意味がある場合に、リアクションを定義します。要素が十分に複雑な場合 connectedCallback() で IndexedDB への接続を開き、必要な処理を行います disconnectedCallback() でのクリーンアップ作業。ただし、注意が必要です。基盤となるインフラストラクチャを あらゆる状況で DOM から要素が削除される。たとえば ユーザーがタブを閉じた場合、disconnectedCallback() は呼び出されません。

プロパティと属性

属性へのプロパティの反映

通常、HTML プロパティが値を DOM に反映すると、 HTML 属性。たとえば、hidden または id の値が変更された場合、 JS:

div.id = 'my-id';
div.hidden = true;

値は属性としてライブ DOM に適用されます。

<div id="my-id" hidden>

これは「プロパティを 属性をご覧ください。 これは、HTML のほぼすべてのプロパティでこれに該当します。その理由は、属性はまた 要素を宣言的に設定したり、ユーザー補助や CSS などの特定の API を使用したりする セレクタは属性に依存します。

プロパティのリフレクションは、要素の DOM を保持したい場合に便利です。 JavaScript の状態と同期するようにする必要があります。1 つの理由は JS の状態が変化したときにユーザー定義のスタイルが適用されるようになります。

<app-drawer> を思い出してください。このコンポーネントのコンシューマは、このコンポーネントのフェードアウトを 無効にするとユーザーの操作ができなくなります。

app-drawer[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

JS で disabled プロパティが変更された場合、その属性を ユーザーのセレクタが一致するよう DOM に追加されています。この要素では、 次のように、同じ名前の属性に値を反映させることができます。

get disabled() {
  return this.hasAttribute('disabled');
}

set disabled(val) {
  // Reflect the value of `disabled` as an attribute.
  if (val) {
    this.setAttribute('disabled', '');
  } else {
    this.removeAttribute('disabled');
  }
  this.toggleDrawer();
}

属性の変更の監視

HTML 属性は、ユーザーが初期状態を簡単に宣言できる方法です。

<app-drawer open disabled></app-drawer>

次のように定義することで、要素は属性の変更に反応できます。 attributeChangedCallback。ブラウザは、変更が行われるたびにこのメソッドを呼び出します。 observedAttributes 配列にリストされている属性にマッピングできます。

class AppDrawer extends HTMLElement {
  // ...

  static get observedAttributes() {
    return ['disabled', 'open'];
  }

  get disabled() {
    return this.hasAttribute('disabled');
  }

  set disabled(val) {
    if (val) {
      this.setAttribute('disabled', '');
    } else {
      this.removeAttribute('disabled');
    }
  }

  // Only called for the disabled and open attributes due to observedAttributes
  attributeChangedCallback(name, oldValue, newValue) {
    // When the drawer is disabled, update keyboard/screen reader behavior.
    if (this.disabled) {
      this.setAttribute('tabindex', '-1');
      this.setAttribute('aria-disabled', 'true');
    } else {
      this.setAttribute('tabindex', '0');
      this.setAttribute('aria-disabled', 'false');
    }
    // TODO: also react to the open attribute changing.
  }
}

この例では、<app-drawer> 属性で追加の属性を設定しており、 disabled 属性が変更されました。ここでは行いませんが、 また、attributeChangedCallback を使用して、JS プロパティを 属性です

要素のアップグレード

段階的な拡張 HTML

カスタム要素は customElements.define()。ただし、これは定義と登録がしなくてもよいという意味ではありません。 一括で行うことができます

カスタム要素は、定義が登録されるに使用できます

プログレッシブ エンハンスメントはカスタム要素の機能です。つまり、 ページで一連の <app-drawer> 要素を宣言し、決して customElements.define('app-drawer', ...)。これは、 ブラウザがカスタム要素の候補を原因不明 タグdefine() を呼び出して、既存の 要素を「要素のアップグレード」と呼びます。

タグ名が定義されたタイミングを知るには、 window.customElements.whenDefined()。これは Promise が返された時点で解決され、 要素が定義されます。

customElements.whenDefined('app-drawer').then(() => {
  console.log('app-drawer defined');
});

- 子要素のセットがアップグレードされるまで作業を遅らせる

<share-buttons>
  <social-button type="twitter"><a href="...">Twitter</a></social-button>
  <social-button type="fb"><a href="...">Facebook</a></social-button>
  <social-button type="plus"><a href="...">G+</a></social-button>
</share-buttons>
// Fetch all the children of <share-buttons> that are not defined yet.
let undefinedButtons = buttons.querySelectorAll(':not(:defined)');

let promises = [...undefinedButtons].map((socialButton) => {
  return customElements.whenDefined(socialButton.localName);
});

// Wait for all the social-buttons to be upgraded.
Promise.all(promises).then(() => {
  // All social-button children are ready.
});

要素定義のコンテンツ

カスタム要素は、内部で DOM API を使用して独自のコンテンツを管理できます。 要素コード。そのためにリアクションが便利です。

- デフォルトの HTML を使用して要素を作成する:

customElements.define('x-foo-with-markup', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
  }
  // ...
});

このタグを宣言すると、次のようになります。

<x-foo-with-markup>
  <b>I'm an x-foo-with-markup!</b>
</x-foo-with-markup>

// TODO: DevSite - インライン イベント ハンドラを使用したためコードサンプルを削除

Shadow DOM を使用する要素の作成

Shadow DOM は、要素が複数のチャンクを所有、レンダリング、スタイル設定するための手段を提供します。 ページの他の部分とは別のものですいや、何かを隠して を 1 つのタグ内にまとめます。

<!-- chat-app's implementation details are hidden away in Shadow DOM. -->
<chat-app></chat-app>

カスタム要素で Shadow DOM を使用するには、this.attachShadow constructor:

let tmpl = document.createElement('template');
tmpl.innerHTML = `
  <style>:host { ... }</style> <!-- look ma, scoped styles -->
  <b>I'm in shadow dom!</b>
  <slot></slot>
`;

customElements.define('x-foo-shadowdom', class extends HTMLElement {
  constructor() {
    super(); // always call super() first in the constructor.

    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(tmpl.content.cloneNode(true));
  }
  // ...
});

使用例:

<x-foo-shadowdom>
  <p><b>User's</b> custom text</p>
</x-foo-shadowdom>

<!-- renders as -->
<x-foo-shadowdom>
  #shadow-root
  <b>I'm in shadow dom!</b>
  <slot></slot> <!-- slotted content appears here -->
</x-foo-shadowdom>

ユーザーのカスタム テキスト

// TODO: DevSite - インライン イベント ハンドラを使用したためコードサンプルを削除

<template> からの要素の作成

馴染みのない方のために説明すると、<template> 要素 を使用すると、解析される DOM のフラグメントを宣言し、ページの読み込み時に非アクティブになる 有効にできます。これもウェブの API プリミティブであり、 説明します。テンプレートは、インフラストラクチャの カスタム要素の構造をご覧ください。

例: イベントから作成された Shadow DOM コンテンツに要素を登録する <template>:

<template id="x-foo-from-template">
  <style>
    p { color: green; }
  </style>
  <p>I'm in Shadow DOM. My markup was stamped from a &lt;template&gt;.</p>
</template>

<script>
  let tmpl = document.querySelector('#x-foo-from-template');
  // If your code is inside of an HTML Import you'll need to change the above line to:
  // let tmpl = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');

  customElements.define('x-foo-from-template', class extends HTMLElement {
    constructor() {
      super(); // always call super() first in the constructor.
      let shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(tmpl.content.cloneNode(true));
    }
    // ...
  });
</script>

この数行のコードには大きな効果があります。これから行う主な作業について 日付:

  1. HTML で新しい要素 <x-foo-from-template> を定義しています。
  2. この要素の Shadow DOM は、<template> から作成されます。
  3. Shadow DOM のおかげで、要素の DOM は要素に対してローカルである
  4. Shadow DOM により、要素の内部 CSS のスコープが要素内に設定されます

現在 Shadow DOM を使用しています。マークアップは <template> からスタンプされました。

// TODO: DevSite - インライン イベント ハンドラを使用したためコードサンプルを削除

カスタム要素のスタイル設定

要素で Shadow DOM を使用して独自のスタイルを定義している場合でも、ユーザーはスタイルを カスタム要素を追加しますこれらは「ユーザー定義のスタイル」と呼ばれます。

<!-- user-defined styling -->
<style>
  app-drawer {
    display: flex;
  }
  panel-item {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
  panel-item:hover {
    opacity: 1.0;
    background: rgb(255, 0, 255);
    color: white;
  }
  app-panel > panel-item {
    padding: 5px;
    list-style: none;
    margin: 0 7px;
  }
</style>

<app-drawer>
  <panel-item>Do</panel-item>
  <panel-item>Re</panel-item>
  <panel-item>Mi</panel-item>
</app-drawer>

要素にスタイルがある場合、CSS の詳細度がどのように機能するか疑問に思うかもしれません。 画像キャプション リクエストです。詳細度については、ユーザースタイルが優先されます。彼らは 要素定義のスタイル設定を常にオーバーライドします。詳しくは、要素の作成に関するセクションをご覧ください。 構築する方法をご覧ください。

未登録の要素の事前スタイル設定

要素がアップグレードされる前に、 :defined 疑似クラス。これはコンポーネントを事前にスタイル設定する場合に便利です。対象 たとえば、未定義ファイルを非表示にして、レイアウトやその他の視覚的な FOUC を 定義されるとフェードインできます。

- 定義する前に <app-drawer> を非表示にします。

app-drawer:not(:defined) {
  /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */
  display: inline-block;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

<app-drawer> が定義された後、セレクタ(app-drawer:not(:defined)) 一致しなくなります。

要素を拡張する

Custom Elements API は、新しい HTML 要素を作成するのに便利なだけでなく、 他のカスタム要素やブラウザの組み込み HTML を拡張する場合にも便利です。

カスタム要素を拡張する

別のカスタム要素を拡張するには、そのクラス定義を拡張します。

- <app-drawer> を拡張する <fancy-app-drawer> を作成します。

class FancyDrawer extends AppDrawer {
  constructor() {
    super(); // always call super() first in the constructor. This also calls the extended class' constructor.
    // ...
  }

  toggleDrawer() {
    // Possibly different toggle implementation?
    // Use ES2015 if you need to call the parent method.
    // super.toggleDrawer()
  }

  anotherMethod() {
    // ...
  }
}

customElements.define('fancy-app-drawer', FancyDrawer);

ネイティブ HTML 要素の拡張

たとえば、より高度な <button> を作成するとします。Deployment の <button> の動作と機能だけでなく、段階的に実行することで、 カスタム要素を使用して既存の要素を強化します。

カスタマイズされた組み込み要素とは、 ブラウザの組み込み HTML タグです。既存のネットワーク インフラストラクチャを 要素は、そのすべての機能(DOM プロパティ、メソッド、アクセシビリティ)を取得することです。 プログレッシブ ウェブの構築に最適な方法 既存の HTML を段階的に拡張するよりも、 あります

要素を拡張するには、 取得する必要がありますたとえば、カスタム エレメントを <button>HTMLElement ではなく HTMLButtonElement から継承する必要があります。 同様に、<img> を拡張する要素は HTMLImageElement を拡張する必要があります。

- <button> の拡張:

// See https://html.spec.whatwg.org/multipage/indices.html#element-interfaces
// for the list of other DOM interfaces.
class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the constructor.
    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight/2}px`;
    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', (e) => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});

ネイティブ クラスを拡張すると、define() の呼び出しが若干変更されることに注意してください。 要素です。必須の 3 つ目のパラメータは、使用するタグをブラウザに伝えます。 あります。これが必要なのは、多くの HTML タグが同じ DOM を共有するためです。 行うことができます。<section> さん、<address> さん、<em> さん(とりわけ)で共有 HTMLElement;<q><blockquote> の両方が HTMLQuoteElement を共有します。その他 {extends: 'blockquote'} を指定すると、ブラウザは <q> ではなく <blockquote> をスープしました。HTML spec をご覧ください。

カスタマイズされた組み込み要素のコンシューマは、いくつかの方法でその要素を使用できます。ユーザーは、 ネイティブ タグに is="" 属性を追加して宣言します。

<!-- This <button> is a fancy button. -->
<button is="fancy-button" disabled>Fancy button!</button>

JavaScript でインスタンスを作成します。

// Custom elements overload createElement() to support the is="" attribute.
let button = document.createElement('button', {is: 'fancy-button'});
button.textContent = 'Fancy button!';
button.disabled = true;
document.body.appendChild(button);

または、new 演算子を使用します。

let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

<img> を拡張する別の例を次に示します。

- <img> の拡張:

customElements.define('bigger-img', class extends Image {
  // Give img default size if users don't specify.
  constructor(width=50, height=50) {
    super(width * 10, height * 10);
  }
}, {extends: 'img'});

ユーザーはこのコンポーネントを次のように宣言します。

<!-- This <img> is a bigger img. -->
<img is="bigger-img" width="15" height="20">

JavaScript でインスタンスを作成します。

const BiggerImage = customElements.get('bigger-img');
const image = new BiggerImage(15, 20); // pass constructor values like so.
console.assert(image.width === 150);
console.assert(image.height === 200);

その他の詳細

不明な要素と未定義のカスタム要素

HTML は寛大で、柔軟に処理できます。たとえば、 ページ上で<randomtagthatdoesntexist>し、ブラウザは完全に満足している 確認します。標準以外のタグが機能するのはなぜですか?答えは HTML 仕様 できます。仕様で定義されていない要素は、次のように解析されます。 HTMLUnknownElement

カスタム要素についても同様です。カスタム要素の候補が解析されます 有効な名前(「-」を含む)で作成された場合は、HTMLElement となります。マイページ カスタム要素に対応しているブラウザで確認することができます。コンソールを起動します。 Ctrl+Shift+J(Mac の場合は Cmd+Opt+J)を押して、 次のコード行を追加します。

// "tabs" is not a valid custom element name
document.createElement('tabs') instanceof HTMLUnknownElement === true

// "x-tabs" is a valid custom element name
document.createElement('x-tabs') instanceof HTMLElement === true

API リファレンス

customElements グローバルは、カスタム あります。

define(tagName, constructor, options)

ブラウザの新しいカスタム要素を定義します。

customElements.define('my-app', class extends HTMLElement { ... });
customElements.define(
    'fancy-button', class extends HTMLButtonElement { ... }, {extends: 'button'});

get(tagName)

有効なカスタム要素のタグ名を指定すると、要素のコンストラクタを返します。 要素定義が登録されていない場合は、undefined を返します。

let Drawer = customElements.get('app-drawer');
let drawer = new Drawer();

whenDefined(tagName)

カスタム要素が定義されたときに解決される Promise を返します。もし 要素はすでに定義されているため、直ちに解決されます。タグ名が一致しない場合は拒否します 有効なカスタム要素名です。

customElements.whenDefined('app-drawer').then(() => {
  console.log('ready!');
});

履歴とブラウザのサポート

ここ数年ウェブ コンポーネントをフォローしている方は、 Chrome 36 以降では、 customElements.define()document.registerElement() に変更。以上です v0 と呼ばれるサポート終了バージョンとみなされます。 customElements.define() は注目のブラウザ ベンダーです。 説明します。「カスタム要素 v1」と呼ばれます。

以前の v0 仕様に関心をお持ちの場合は、html5rocks の 記事をご覧ください。

ブラウザ サポート

Chrome 54(ステータス)、 Safari 10.1(ステータス)、および Firefox 63(status)は、 カスタム要素 v1。エッジの開始 学びます

カスタム要素の機能を検出するには、 window.customElements:

const supportsCustomElementsV1 = 'customElements' in window;

ポリフィル

ブラウザが広く普及するまでは、 スタンドアロン ポリフィル カスタム要素 v1 で利用可能です。ただし、webcomponents.js loader ウェブ コンポーネントのポリフィルが最適に読み込まれるようにします。ローダ 特徴検出を使用して、必要なポリフィルのみを非同期で読み込む 必要があります。

インストールします。

npm install --save @webcomponents/webcomponentsjs

使用方法:

<!-- Use the custom element on the page. -->
<my-element></my-element>

<!-- Load polyfills; note that "loader" will load these async -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>

<!-- Load a custom element definitions in `waitFor` and return a promise -->
<script type="module">
  function loadScript(src) {
    return new Promise(function(resolve, reject) {
      const script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }

  WebComponents.waitFor(() => {
    // At this point we are guaranteed that all required polyfills have
    // loaded, and can use web components APIs.
    // Next, load element definitions that call `customElements.define`.
    // Note: returning a promise causes the custom elements
    // polyfill to wait until all definitions are loaded and then upgrade
    // the document in one batch, for better performance.
    return loadScript('my-element.js');
  });
</script>

まとめ

カスタム要素は、ブラウザで新しい HTML タグを定義するための新しいツールであり、 コンポーネントの作成に使用できます。他の新しいプラットフォームと組み合わせる <template> などのプリミティブがサポートされており、 Web Components の画像です。

  • 再利用可能なコンポーネントを作成、拡張するためのクロスブラウザ(ウェブ標準)。
  • ライブラリやフレームワークは必要ありません。標準 JS/HTML を使用
  • 使い慣れたプログラミング モデルを提供。これは DOM、CSS、HTML だけです。
  • 他の新しいウェブ プラットフォーム機能(Shadow DOM、<template>、CSS)と適切に連携 カスタムプロパティなど)
  • ブラウザの DevTools と緊密に統合されています。
  • 既存のユーザー補助機能を活用する。