Tingkatkan HTML dengan teg tersuai dan Shadow DOM

Dalam artikel saya sebelum ini, saya menerangkan asas membuat label tersuai. Malah, teg tersuai menghilangkan beberapa kerapuhan semasa membina aplikasi web yang hebat. Walau bagaimanapun, usaha untuk mengawal tidak berhenti dan teg tersuai tradisional tidak mencukupi untuk membina aplikasi yang kaya dengan prestasi. Sebagai contoh, bilangan pemilih gaya dalam kod anda mungkin meningkat dengan penambahan teg tersuai. Ini hanyalah salah satu daripada banyak faktor yang boleh menyebabkan masalah prestasi.

Salah satu cara untuk menyelesaikan masalah ini adalah melalui Shadow DOM.

Shadow DOM berfungsi dengan memperkenalkan gaya berskop. Ia tidak memerlukan sebarang konvensyen atau alat penamaan khas. Dengan Shadow DOM, menggabungkan CSS dengan markup adalah mudah. Tambahan pula, ciri ini membolehkan kami menyembunyikan semua butiran tentang pelaksanaan dalam JavaScript biasa.

Mengapa menggunakan Shadow DOM?

Shadow DOM menyediakan penyelesaian berikut:

• Benarkan elemen bebas dalam DOM. Pertanyaan seperti document.querySelector tidak mengembalikan elemen yatim.
document.querySelector 之类的查询不会返回孤立的元素。
• 允许作用域 CSS。作用域 CSS 确保所有样式规则都保留在页面内。它还意味着更简单的 CSS 选择器，没有任何命名冲突和许多通用类。

我们的示例

为了演示 Shadow DOM，我们将使用一个名为 tuts-tabs 的简单组件。本文中的所有引用都将指向这段代码。要体验 Shadow DOM，请看下面的演示：

了解 Shadow DOM

什么是 Shadow DOM？

开始使用 Shadow DOM 进行编码之前，您需要了解常规 DOM。

HTML 是网站的支柱。只需几分钟，您就可以创建一个页面。当您在浏览器中打开该页面时，DOM 开始发挥作用。一旦浏览器加载页面，它就会开始将 HTML 解析为数据模型。该数据模型是一个树结构，其中的节点代表 HTML 中的元素。该数据模型很容易用代码修改和操作。

缺点是整个网页甚至复杂的 Web 应用程序都会被视为单个数据结构。这不太容易调试！例如，适用于一个组件的 CSS 样式最终可能会影响应用程序中其他位置的另一个组件。

当您想要将界面的一部分与其余部分隔离时，可以使用 iframes。但 iframe 很重并且限制性极大。

这就是引入 Shadow DOM 的原因。它是现代浏览器的一项强大功能，允许 Web 开发人员在 DOM 中包含各种元素的子树。 DOM 的这些子树不会影响主文档树。从技术上讲，它们被称为影子树。

影子树有一个影子根，它附加到 DOM 中的父级。该父级称为影子主机。

例如，如果您将 <input type="range"> 插入由 WebKit 提供支持的浏览器，它将转换为滑块。为什么？这是一个滑块，因为子树 DOM 元素之一了解“范围”以更改其外观并引入类似滑块的功能。这是 Shadow DOM 给选项卡带来的一个优势。

哇，这是很多理论。现在，您可能想要编写一些代码来了解如何实现 Shadow DOM。

使用 Shadow DOM 的分步指南

第 1 步：创建 Shadow DOM 元素

使用 element.attachShadow() 创建 Shadow DOM 元素。

在我们的示例 tuts-tab 中，您将看到用于创建 Shadow DOM 元素的代码。

 let shadowRoot = this.attachShadow({mode: 'open'});

第 2 步. 将内容添加到 Shadow Root

接下来，我们将使用 .innerHTML 将内容添加到影子根目录。请注意，这不是填充 Shadow DOM 的唯一方法。有许多 API 可以帮助您填充 Shadow DOM。

shadowRoot.innerHTML = ``

第 3 步：将自定义元素连接到 Shadow DOM

将自定义元素连接到 Shadow DOM 非常简单。请记住，当您将自定义元素与 Shadow DOM 组合时，您将能够使用 CSS、JavaScript 和 HTML 创建封装组件。因此，您将创建一个可以在您的应用程序中重用的全新 Web 组件。

在我们的示例中，我们使用 customElements.define() 创建一个新的自定义元素。正如上一教程中提到的，新元素的名称中应包含“-”。 tuts-tabs 组件扩展了 HTMLElement Benarkan CSS berskop. CSS berskop memastikan semua peraturan gaya kekal dalam halaman. Ia juga bermaksud pemilih CSS yang lebih mudah tanpa sebarang konflik penamaan dan banyak kelas biasa.

Contoh kami 🎜Untuk menunjukkan Shadow DOM, kami akan menggunakan komponen mudah yang dipanggil tuts-tabs. Semua rujukan dalam artikel ini akan merujuk kepada kod ini. Untuk mengalami Shadow DOM, lihat demo di bawah: 🎜 🎜🎜

Memahami Shadow DOM

Apakah Shadow DOM?

🎜Sebelum anda memulakan pengekodan dengan Shadow DOM, anda perlu memahami DOM biasa. 🎜 🎜HTML ialah tulang belakang tapak web anda. Hanya dalam beberapa minit, anda boleh membuat halaman. Apabila anda membuka halaman dalam penyemak imbas anda, DOM akan dimainkan. Sebaik sahaja pelayar memuatkan halaman, ia mula menghuraikan HTML ke dalam model data. Model data ialah struktur pokok di mana nod mewakili elemen dalam HTML. Model data mudah diubah suai dan dimanipulasi dengan kod. 🎜 🎜Kelemahannya ialah keseluruhan halaman web atau bahkan aplikasi web yang kompleks dianggap sebagai satu struktur data. Ini bukan mudah untuk nyahpepijat! Sebagai contoh, gaya CSS yang digunakan pada satu komponen mungkin akhirnya menjejaskan komponen lain di tempat lain dalam aplikasi. 🎜 🎜Gunakan iframes apabila anda ingin mengasingkan sebahagian antara muka daripada yang lain. Tetapi iframe adalah berat dan sangat terhad. 🎜 🎜Inilah sebabnya Shadow DOM diperkenalkan. Ia adalah ciri berkuasa pelayar moden yang membolehkan pembangun web memasukkan subpokok pelbagai elemen dalam DOM. Subpokok DOM ini tidak menjejaskan pokok dokumen utama. Secara teknikal, ia dipanggilPokok Bayang. 🎜 🎜Sebuah pokok bayang mempunyai akar bayang, yang dilampirkan pada induk dalam DOM. Induk ini dipanggil hos bayangan. 🎜 🎜Sebagai contoh, jika anda memasukkan <input type="range"> ke dalam penyemak imbas yang dikuasakan oleh WebKit, ia akan ditukar menjadi peluncur. kenapa? Ini ialah peluncur kerana salah satu elemen DOM subtree memahami "skop" untuk menukar penampilannya dan memperkenalkan fungsi seperti peluncur. Ini adalah kelebihan yang dibawa oleh Shadow DOM ke tab. 🎜 🎜Wah, banyak teorinya. Sekarang, anda mungkin mahu menulis beberapa kod untuk melihat cara Shadow DOM dilaksanakan. 🎜

Panduan langkah demi langkah untuk menggunakan Shadow DOM

Langkah 1: Buat elemen Shadow DOM 🎜 🎜Gunakan element.attachShadow() untuk mencipta elemen DOM Shadow. 🎜 🎜Dalam contoh tuts-tab kami, anda akan melihat kod yang digunakan untuk mencipta elemen Shadow DOM. 🎜

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

    // Attach a shadow root to <tuts-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    ...
});

Langkah 2. Tambahkan kandungan pada Shadow Root🎜 🎜Seterusnya, kami akan menggunakan .innerHTML untuk menambah kandungan pada akar bayang. Ambil perhatian bahawa ini bukan satu-satunya cara untuk mengisi Shadow DOM. Terdapat banyak API yang membantu anda mengisi Shadow DOM. 🎜

customElements.define('tuts-tabs', class extends HTMLElement {
    constructor() {
    super(); 
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
         <!-- styles are scoped to tuts-tabs! -->
         <style>#tabs { ... }</style>
    `;
    }
    ...
});

Langkah 3: Sambungkan elemen tersuai ke Shadow DOM🎜 🎜Menyambung elemen tersuai ke Shadow DOM adalah sangat mudah. Perlu diingat bahawa apabila anda menggabungkan elemen tersuai dengan Shadow DOM, anda akan dapat membuat komponen terkapsul menggunakan CSS, JavaScript dan HTML. Oleh itu, anda akan mencipta komponen web baharu sepenuhnya yang boleh digunakan semula dalam aplikasi anda. 🎜 🎜Dalam contoh kami, kami menggunakan customElements.define() untuk mencipta elemen tersuai baharu. Seperti yang dinyatakan dalam tutorial sebelumnya, elemen baharu harus mengandungi "-" dalam namanya. Komponen tuts-tabs memanjangkan HTMLElement. 🎜

当我们扩展 HTMLElement 时，在构造函数中调用 super() 非常重要。另外，构造函数是需要创建 shadowRoot 的地方。

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

    // Attach a shadow root to <tuts-tabs>.
    const shadowRoot = this.attachShadow({mode: 'open'});
    ...
});

创建 shadowRoot 后，您可以为其创建 CSS 规则。 CSS 规则可以包含在 <style></style> 标记中，并且这些样式的范围仅限于 tuts-tab。

customElements.define('tuts-tabs', class extends HTMLElement {
    constructor() {
    super(); 
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
         <!-- styles are scoped to tuts-tabs! -->
         <style>#tabs { ... }</style>
    `;
    }
    ...
});

第 4 步：向 Shadow DOM 添加样式

与tuts-tab相关的CSS可以写在<style></style>标签内。请记住，此处声明的所有样式都将作用于 tuts-tab Web 组件。 作用域 CSS 是 Shadow DOM 的一项有用功能，它具有以下属性：

• CSS 选择器不会影响 Shadow DOM 之外的组件。
• Shadow DOM 中的元素不受其外部选择器的影响。
• 样式的范围仅限于宿主元素。

如果你想在 Shadow DOM 中选择自定义元素，你可以使用 :host 伪类。当 :host 伪类用于普通 DOM 结构时，它不会产生任何影响。但在 Shadow DOM 内部，它会产生很大的差异。您将在 tuts-tab 组件中找到以下 :host 样式。它决定显示和字体样式。这只是一个简单的示例，展示如何将 :host 合并到 Shadow DOM 中。

:host 的一个问题是它的特殊性。如果父页面有 :host，它将具有更高的特异性。父样式内的所有样式都会获胜。这是从外部覆盖自定义元素内部样式的一种方法。

 :host {
  display: inline-block;
  width: 650px;
  font-family: 'Roboto Slab';
  contain: content;
}

随着 CSS 变得更简单，Shadow DOM 的整体效率也会提高。

下面定义的所有样式都是影子根的本地样式。

shadowRoot.innerHTML = `
<style>
:host {
  display: inline-block;
  width: 650px;
  font-family: 'Roboto Slab';
  contain: content;
}
#panels {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  background: white;
  border-radius: 3px;
  padding: 16px;
  height: 250px;
  overflow: auto;
}
#tabs slot {
  display: inline-flex; /* Safari bug. Treats <slot> as a parent */
}
...
</style>

同样，您可以自由地在 Shadow DOM 中引入样式表。当您在 Shadow DOM 内链接样式表时，它们的作用域将位于 Shadow 树内。这是一个简单的例子来帮助您理解这个概念。

shadowRoot.innerHTML = `
<style>
:host {
  display: inline-block;
  width: 650px;
  font-family: 'Roboto Slab';
  contain: content;
}
#panels {
  box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
  background: white;
  border-radius: 3px;
  padding: 16px;
  height: 250px;
  overflow: auto;
}
...
</style>
<link rel="stylesheet" href="styles.css">
...

步骤 5. 在自定义组件中定义 HTML 元素

接下来，我们可以定义 tuts-tab 的 HTML 元素。

在简单的选项卡结构中，应该有可单击的标题和反映所选标题内容的面板。这显然意味着我们的自定义元素应该有一个带有标题的 div 和一个用于面板的 div 。 HTML 组件将定义如下：

customElements.define('tuts-tabs', class extends HTMLElement {
    constructor() {
    super(); const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
        <style>#tabs { ... }</style>
        
        ....
        
        // Our HTML elements for tuts-tab
        <div id="tabs">...</div>
        <div id="panels">...</div>
        ...
    `;
    }
    ...
});

在面板的 div 中，您会遇到一个有趣的标签，名为 <slot></slot>。我们的下一步是了解有关插槽的更多信息。

第 6 步：在 Shadow DOM 中使用槽

Slot 在 Shadow DOM API 中起着至关重要的作用。插槽充当自定义组件内的占位符。这些组件可以由您自己的标记填充。槽声明分为三种不同类型：

1. 您可以拥有零个插槽的组件。
2. 您可以创建一个包含后备内容或空内容的槽位。
3. 您可以使用整个 DOM 树创建槽。

在我们的 tuts-tabs 中，我们有一个用于选项卡标题的命名槽，以及另一个用于面板的槽。命名槽会创建您可以通过名称引用的孔。

customElements.define('tuts-tabs', class extends HTMLElement {
    constructor() {
    super(); const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
        <style>#tabs { ... }</style>
        
        ....
        
        // Our HTML elements for tuts-tab
        <div id="tabs">
            <slot id="tabsSlot" name="title"></slot>
         </div>
        <div id="panels">
            <slot id="panelsSlot"></slot>
        </div>
        ...
    `;
    }
    ...
});

第 7 步：填充插槽

现在，是时候填充插槽了。在之前的教程中，我们了解了定义自定义元素的四种不同方法，并且 tuts-tabs 使用其中两种方法来构建选项卡：connectedCallback 和 disconnectedCallback。

在 connectedCallback 中，我们将填充步骤 6 中定义的槽。我们的 connectedCallback 将定义如下。我们使用 querySelector 来识别 tabsSlot 和 panelsSlot。当然，这并不是识别 HTML 中插槽的唯一方法。

识别槽后，您需要为其分配节点。在 tuts-tab 中，我们使用以下 tabsSlot.assignedNodes 来标识选项卡的数量。

connectedCallback() {
    ...
    const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
    const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');

    this.tabs = tabsSlot.assignedNodes({flatten: true});
    this.panels = panelsSlot.assignedNodes({flatten: true}).filter(el => {
      return el.nodeType === Node.ELEMENT_NODE;
    });
    ...
  }

此外，connectedCallback 是我们注册所有事件监听器的地方。每当用户单击选项卡标题时，面板的内容都需要更改。可以在 connectedCallback 函数中注册用于实现此目的的事件侦听器。

第 8 步：实现逻辑和交互性

我们不会深入探讨如何实现选项卡及其功能的逻辑。但是，请记住，我们的自定义 tuts-tab 组件中实现了以下方法，用于在选项卡之间切换：

1. onTitleClick： 该方法捕获选项卡标题上的点击事件。它有助于在选项卡面板内切换内容。
2. selectTab：该函数负责隐藏面板和显示右侧面板。此外，它还负责突出显示所选的选项卡。
3. findFirstSelected：此方法用于在第一次加载时选择选项卡。
4. selected：这是一个用于获取所选选项卡的 getter 和 setter。

第 9 步.定义生命周期方法

继续，不要忘记定义 disconnectedCallback。这是自定义元素中的生命周期方法。当自定义元素从视图中销毁时，会触发此回调。这是在应用程序中删除操作侦听器和重置控件的最佳位置之一。但是，回调的范围仅限于自定义元素。在我们的例子中，它将是 tuts-tab。

第 10 步。使用新组件！

最后一步是在 HTML 中使用 tuts-tab 。我们可以很容易地在 HTML 标记中插入 tuts-tab 。这是一个简单的例子来演示其用法。

<tuts-tabs background>
  <button slot="title">Tab 1</button>
  <button slot="title" selected>Tab 2</button>
  <button slot="title">Tab 3</button>
  <section>content panel 1</section>
  <section>content panel 2</section>
  <section>content panel 3</section>
</tuts-tabs>

结论

我们开始了！我们已经完成了一个重要教程，在该教程中我们创建并使用了自定义元素。该过程很简单，并且在开发网页时被证明非常有用。我希望您尝试创建自定义元素并与我们分享您的经验。

Atas ialah kandungan terperinci Tingkatkan HTML dengan teg tersuai dan Shadow DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!