このページは Cloud Translation API によって翻訳されました。

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

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

Eric Bidelman

カスタム要素を使用すると、ウェブデベロッパーは新しい 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')）など

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

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

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

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

名前	呼び出されるタイミング
`constructor`	要素のインスタンスは、作成またはアップグレードされます。データの初期化に便利イベントリスナーの設定シャドードームをつくることです。詳しくは、 <ph type="x-smartling-placeholder"></ph> 仕様をご覧ください。`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.
});

注: カスタム要素は、定義される前は辺りの状態にあるように思えます。spec では、要素の状態を undefined、uncustomized、または custom として定義しています。<div> などの組み込み要素は常に defined です。

要素定義のコンテンツ

カスタム要素は、内部で 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));
  }
  // ...
});

注：上記のスニペットでは、shadowRootのinnerHTMLを設定する代わりに、template要素を使用して DOM のクローンを作成します。この手法では、テンプレートのコンテンツが 1 回だけ解析されるため、HTML 解析コストが削減されます。これに対して、shadowRoot に対して innerHTML を呼び出すと、各インスタンスの HTML が解析されます。テンプレートについては、次のセクションで詳しく説明します。

使用例:

<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>

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

HTML で新しい要素 <x-foo-from-template> を定義しています。
この要素の Shadow DOM は、<template> から作成されます。
Shadow DOM のおかげで、要素の DOM は要素に対してローカルである
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 仕様をご覧ください。

カスタマイズされた組み込み要素のコンシューマは、いくつかの方法でその要素を使用できます。ユーザーは、ネイティブタグに 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 ローダウェブコンポーネントのポリフィルが最適に読み込まれるようにする必要があります。ローダ特徴検出を使用して、必要なポリフィルのみを非同期で読み込む必要があります。

インストールします。

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>

注: :defined CSS 疑似クラスはポリフィルできません。

まとめ

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

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

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

はじめに

新しい要素の定義

要素の JavaScript API を定義する

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

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

プロパティと属性

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

属性の変更の監視

要素のアップグレード

段階的な拡張 HTML

要素定義のコンテンツ

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

<template> からの要素の作成

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

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

要素を拡張する

カスタム要素を拡張する

ネイティブ HTML 要素の拡張

その他の詳細

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

API リファレンス

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

ブラウザ サポート

ポリフィル

まとめ

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

`<template>` からの要素の作成

ブラウザサポート