本頁面由 Cloud Translation API 翻譯而成。

自訂元素 v1 - 可重複使用的網頁元件

自訂元素可讓網頁開發人員定義新的 HTML 標記、擴充現有標記，以及建立可重複使用的網頁元件。

Eric Bidelman

透過自訂元素，網頁開發人員可以建立新的 HTML 標記、強化現有的 HTML 標記，或擴充其他開發人員編寫的元件。API 是網頁元件的基礎。它提供以網路標準為基礎的方法，只需使用一般 JS/HTML/CSS 即可建立可重複使用的元件。因此，應用程式中的程式碼會變少，程式碼會模組化，且可重複使用。

簡介

瀏覽器提供了絕佳的工具，可用於建構網路應用程式。它稱為 HTML。你可能聽過這個詞！它是宣告式、可移植、支援良好且易於操作。雖然 HTML 很棒，但其字彙和可擴充性有限。HTML 即時標準一直缺乏一種方法，可自動將 JS 行為與標記相關聯。

自訂元素是讓 HTML 現代化的最佳解方，可填補缺少的部分，並將結構與行為整合在一起。如果 HTML 無法解決問題，我們可以建立可解決問題的自訂元素。自訂元素可教導瀏覽器新的技巧，同時保留 HTML 的優點。

定義新元素

如要定義新的 HTML 元素，我們需要 JavaScript 的強大功能！

customElements 全域元素用於定義自訂元素，並向瀏覽器說明新代碼。使用您要建立的標記名稱和可延伸基本 HTMLElement 的 JavaScript class 呼叫 customElements.define()。

範例：定義行動裝置抽屜面板 <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> 或任何其他元素並無不同。您可以在網頁上宣告例項、在 JavaScript 中動態建立、附加事件監聽器等等。請繼續閱讀，瞭解更多範例。

定義元素的 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 屬性。

自訂元素的一個簡單功能是，類別定義中的 this 會參照 DOM 元素本身，也就是類別的例項。在本範例中，this 是指 <app-drawer>。這就是元素如何將 click 事件監聽器附加至自身！而且不限於事件監聽器。整個 DOM API 都可在元素程式碼中使用。使用 this 存取元素的屬性、檢查其子項 (this.children)、查詢節點 (this.querySelectorAll('.items')) 等。

建立自訂元素的規則

自訂元素的名稱必須包含破折號 (-)。因此 <x-tags>、<my-element> 和 <my-awesome-app> 都是有效的名稱，而 <tabs> 和 <foo_bar> 則不是。這項規定可讓 HTML 剖析器區分自訂元素和一般元素。這也確保在 HTML 中加入新標記時，能向前相容。
您無法註冊相同的標記。嘗試這麼做會擲回 DOMException。只要您向瀏覽器說明新的代碼，恕不退貨。
自訂元素無法自行關閉，因為 HTML 只允許少數元素自行關閉。請一律寫入結尾標記 (<app-drawer></app-drawer>)。

自訂元素回應

自訂元素可定義特殊的生命週期鉤子，在元素存在的特定時間點執行程式碼。這些稱為自訂元素反應。

名稱	在下列情況下呼叫
`constructor`	系統會建立或升級元素的例項。可用於初始化狀態、設定事件監聽器，或建立陰影 DOM。如要瞭解 `constructor` 中的限制，請參閱規格。
`connectedCallback`	每次將元素插入 DOM 時都會呼叫。可用於執行設定程式碼，例如擷取資源或轉譯。一般來說，您應盡量將工作延後至這個時間。
`disconnectedCallback`	每次從 DOM 移除元素時都會呼叫。用於執行清理程式碼。
`attributeChangedCallback(attrName, oldVal, newVal)`	在新增、移除、更新或取代觀察屬性時呼叫。當剖析器建立元素或升級時，也會為初始值呼叫此方法。注意：只有 `observedAttributes` 屬性中列出的屬性會收到這個回呼。
`adoptedCallback`	自訂元素已移至新的 `document` (例如名為 `document.adoptNode(el)` 的某人)。

Reaction 回呼為同步。如果有人在元素上呼叫 el.setAttribute()，瀏覽器會立即呼叫 attributeChangedCallback()。同樣地，當元素從 DOM 中移除 (例如使用者呼叫 el.remove()) 後，您也會收到 disconnectedCallback()。

範例：為 <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 屬性。例如，當 JS 中的 hidden 或 id 值變更時：

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

這些值會套用至即時 DOM 做為屬性：

<div id="my-id" hidden>

這就是所謂的「將屬性反應至屬性」。幾乎所有 HTML 屬性都會這樣做。這是因為屬性也適用於以宣告方式設定元素，而某些 API (例如無障礙和 CSS 選取器) 則需要使用屬性才能運作。

反射屬性在您想要讓元素的 DOM 表示法與 JavaScript 狀態保持同步的任何地方都很實用。您可能會想反映屬性的原因之一，是為了在 JS 狀態變更時套用使用者定義的樣式。

回想一下我們的<app-drawer>。這個元件的使用者可能會在元件停用時，將其淡出和/或防止使用者互動：

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

當 disabled 屬性在 JS 中變更時，我們希望將該屬性新增至 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.
  }
}

在這個範例中，我們會在 disabled 屬性變更時，針對 <app-drawer> 設定其他屬性。雖然我們在這裡沒有這麼做，但您也可以使用 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. });

注意： 我認為自訂元素在定義之前處於模糊狀態。規格會將元素狀態定義為 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 的元素

注意： 本文不會介紹 Shadow DOM 的功能，但這是可與自訂元素結合的強大 API。Shadow DOM 本身就是組合工具。搭配自訂元素使用時，就能發揮神奇的效果。
Shadow DOM 提供一種方法，讓元素擁有、轉譯及設定樣式，以便與網頁的其他部分分開的 DOM 片段。您甚至可以將整個應用程式隱藏在單一標記中：

 <chat-app></chat-app>

如要在自訂元素中使用 Shadow DOM，請在 constructor 中呼叫 this.attachShadow：

let tmpl = document.createElement('template'); tmpl.innerHTML = ` <style>:host { ... }</style>  <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)); } // ... });

注意： 在上述程式碼片段中，我們使用 template 元素複製 DOM，而非設定 shadowRoot 的 innerHTML。由於範本的內容只會剖析一次，而 shadowRoot 會為每個例項剖析 HTML，因此這項技巧可降低 HTML 剖析成本。innerHTML我們會在下一節進一步說明範本。

使用範例：

<x-foo-shadowdom> <p><b>User's</b> custom text</p> </x-foo-shadowdom>  <x-foo-shadowdom> #shadow-root <b>I'm in shadow dom!</b> <slot></slot>  </x-foo-shadowdom>

使用者自訂文字

// TODO：DevSite - 已移除使用內嵌事件處理常式的程式碼範例

從 <template> 建立元素

對於不熟悉的使用者，<template> 元素可讓您宣告 DOM 片段，這些片段會在解析時處於無效狀態，並可在稍後的執行階段啟用。這是網頁元件系列中的另一個 API 原始元素。範本是宣告自訂元素結構的理想預留位置。

範例：使用由 <template> 建立的 Shadow DOM 內容註冊元素：

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

元素的 DOM 是元素的本機，這要歸功於 Shadow DOM

元素的內部 CSS 會受到 Shadow DOM 的範圍限制

我位於 Shadow DOM 中。我的標記是從 <template> 蓋上。

// TODO：DevSite - 已移除使用內嵌事件處理常式的程式碼範例

為自訂元素設定樣式

即使元素使用 Shadow DOM 定義自己的樣式，使用者仍可在自己的網頁中為自訂元素設定樣式。這就是所謂的「使用者定義樣式」。

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

您可能會想知道，如果元素在 Shadow DOM 中定義了樣式，CSS 特殊性會如何運作。就具體性而言，使用者樣式勝出。它們一律會覆寫元素定義的樣式。請參閱「建立使用 Shadow DOM 的元素」一節。

為未註冊的元素預先設定樣式

在元素升級前，您可以使用 :defined 擬類別在 CSS 中指定元素。這對於預先設定元件樣式相當實用。舉例來說，您可能想隱藏未定義的元件，並在定義時淡入，藉此避免版面配置或其他視覺 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)) 就不再相符。

擴充元素

自訂元素 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>。與其複製 <button> 的行為和功能，不如使用自訂元素逐步強化現有元素，這會是更好的做法。

自訂內建元素是一種自訂元素，可擴充瀏覽器的其中一個內建 HTML 標記。擴充現有元素的主要好處，是可以獲得該元素的所有功能 (DOM 屬性、方法、無障礙設計)。漸進式網頁應用程式的最佳撰寫方式，就是漸進式強化現有 HTML 元素。

注意： 目前只有 Chrome 67 支援自訂內建元素 (status)。Edge 和 Firefox 會導入這項功能，但 Safari 已選擇不導入。這對無障礙和漸進式增強功能來說並不理想。如果您認為擴充原生 HTML 元素很實用，請在 GitHub 上針對 509 和 662 發表意見。
如要擴充元素，您必須建立從正確 DOM 介面繼承的類別定義。舉例來說，擴充 <button> 的自訂元素必須繼承自 HTMLButtonElement，而非 HTMLElement。同樣地，擴充 <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() 的呼叫會略有變動。必要的第三個參數會告知瀏覽器您要擴充哪個標記。這是必要的，因為許多 HTML 標記都共用相同的 DOM 介面。<section>、<address> 和 <em> (以及其他類似項目) 都會共用 HTMLElement；<q> 和 <blockquote> 都會共用 HTMLQuoteElement；等等。指定 {extends: 'blockquote'} 可讓瀏覽器知道您要建立的是強化版 <blockquote>，而非 <q>。如需 HTML 的 DOM 介面完整清單，請參閱 HTML 規格。

注意： 擴充 HTMLButtonElement 後，我們的精緻按鈕就會具備 <button> 的所有 DOM 屬性/方法。這樣一來，我們就不需要自行實作許多項目，包括 disabled 屬性、click() 方法、keydown 事件監聽器和 tabindex 管理。相反地，我們可以透過自訂功能 (即 drawRipple() 方法) 逐步提升 <button>。程式碼越少，重複使用率就越高！
自訂內建元素的使用者可以透過多種方式使用該元素。只要在原生標記中加入 is="" 屬性，即可宣告：

 <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'});

使用者會將此元件宣告為：

 <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 以上版本實作了採用 document.registerElement() 而非 customElements.define() 的 Custom Elements API 版本。這項標準現已淘汰，並稱為 v0。customElements.define() 是新熱門技術，也是瀏覽器供應商開始導入的技術。也就是自訂元素 v1。

如果您對舊版 v0 規格感興趣，請參閱 html5rocks 文章。

瀏覽器支援

Chrome 54 (狀態)、Safari 10.1 (狀態) 和 Firefox 63 (狀態) 提供自訂元素第 1 版。Edge 已開始開發。

如要偵測自訂元素，請檢查 window.customElements 是否存在：

const supportsCustomElementsV1 = 'customElements' in window;

聚酯纖維

在瀏覽器廣泛支援之前，自訂元素 v1 提供獨立的 polyfill。不過，我們建議您使用 webcomponents.js 載入器，以最佳方式載入網頁元件 polyfill。載入器會使用功能偵測功能，只異步載入瀏覽器所需的必要 pollyfill。

注意： 如果您的專案轉譯為或使用 ES5，請務必參閱附註，瞭解如何在 polyfill 之外加入 custom-elements-es5-adapter.js。

安裝方式如下：

npm install --save @webcomponents/webcomponentsjs

使用方式：

 <my-element></my-element>  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>  <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 標記，並建立可重複使用的元件。將這些元素與其他新平台原始元素 (例如 Shadow DOM 和 <template>) 結合，我們就能開始實現 Web 元件的宏觀願景：

跨瀏覽器 (網路標準)，可用於建立及擴充可重複使用的元件。

無需程式庫或架構即可開始使用。純 JS/HTML 讚！

提供熟悉的程式設計模式。這只是 DOM/CSS/HTML。

可與其他新的網路平台功能 (Shadow DOM、<template>、CSS 自訂屬性等) 搭配使用

與瀏覽器的開發人員工具緊密整合。

善用現有的無障礙功能。

自訂元素 v1 - 可重複使用的網頁元件

簡介

定義新元素

定義元素的 JavaScript API

建立自訂元素的規則

自訂元素回應

屬性和屬性

將屬性反應至屬性

觀察屬性變更

元素升級

漸進增強的 HTML

元素定義的內容

建立使用 Shadow DOM 的元素

從 <template> 建立元素

為自訂元素設定樣式

為未註冊的元素預先設定樣式

擴充元素

擴充自訂元素

擴充原生 HTML 元素

其他詳細資料

不明元素與未定義的自訂元素

API 參考資料

歷史記錄和瀏覽器支援

瀏覽器支援

聚酯纖維

結論

從 `<template>` 建立元素