1. Web
  2. Web API
  3. Web Components

Web Components

Web Components 是一套不同的技術，它允許您建立可重用的自定義元素——這些元素的功��與您程式碼的其餘部分隔離開來——並在您的 Web 應用中使用它們。

概念與用法

作為開發者，我們都知道盡可能重用程式碼是一個好主意。傳統上，這對於自定義標記結構來說並不容易——想想看您有時不得不編寫的複雜的 HTML（以及相關的樣式和指令碼）來渲染自定義 UI 控制元件，以及如果您不注意，多次使用它們可能會讓您的頁面變得一團糟。

Web Components 旨在解決此類問題——它包含三個主要技術，可以組合使用來建立具有封裝功能的通用自定義元素，您可以隨意在任何地方重用它們，而不必擔心程式碼衝突。

自定義元素

一組 JavaScript API，允許您定義自定義元素及其行為，然後可以在您的使用者介面中按需使用它們。

Shadow DOM

一組 JavaScript API，用於將一個封裝的“影子” DOM 樹附加到一個元素上——它與主文件 DOM 分開渲染——並控制相關的功能。透過這種方式，您可以將元素的特性保持私有，這樣它們就可以被指令碼化和樣式化，而不用擔心與文件的其他部分發生衝突。

HTML 模板

<template> 和 <slot> 元素使您可以編寫在渲染頁面中不顯示的標記模板。這些模板隨後可以多次用作自定義元素結構的基��進行重用。

實現 Web Component 的基本方法通常如下所示

  1. 建立一個類，在其中使用 `class` 語法指定 Web Component 的功能。
  2. 使用 `CustomElementRegistry.define()` 方法註冊您的新自定義元素，向其傳遞要定義的元素名稱、指定其功能的類或函式，以及可選的它繼承自哪個元素。
  3. 如果需要，使用 `Element.attachShadow()` 方法將 Shadow DOM 附加到自定義元素上。使用常規的 DOM 方法將子元素、事件監聽器等新增到 Shadow DOM 中。
  4. 如果需要，使用 `