ウェブ デベロッパーは、カスタム要素を使用して、新しい 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')
)など
カスタム要素の作成に関するルール
- カスタム要素の名前にはダッシュ(-)が必要です。したがって、
<x-tags>
、<my-element>
、<my-awesome-app>
はすべて有効な名前で、<tabs>
は有効な名前です。<foo_bar>
ではありません。この要件は、HTML パーサーが カスタム要素と通常の要素を区別します。また、ファイアウォール ルールを 互換性を保つことができます。 - 同じタグを複数回登録することはできません。関連付けようとすると、
DOMException
をスローする。新しいタグをブラウザに設定すれば できます。取り消しは不要。 - カスタム要素は 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 <template>.</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
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 と緊密に統合されています。
- 既存のユーザー補助機能を活用する。