Custom Elements 中如何使用 HTML 模板-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements 是一个 Web 组件化的新特性，使开发人员可以创造自定义标记的 HTML 元素。Custom Elements 具有可重用性、封装性、隔离性等优点，而使用 HTML 模板可以更好的实现Custom Elements的封装性和可重用性。

HTML 模板是什么？

在 HTML5 中，添加了一个<template>标签，可以定义一个HTML模板，该模板不会在页面中直接渲染，而是可以作为组件的模板使用。使用HTML模板可以减少DOM操作，并且可以重复使用HTML。

HTML模板通常位于DOM之外，但使用JavaScript可以查询模板中的元素。

以下是一个简单的示例HTML模板：

<template id="my-template">
  <h1>这是我的模板</h1>
  <p>我很高兴在这里。</p>
</template>

在这个示例中，<template>元素定义了一个名为“my-template”的模板，该模板包含一个<h1>标签和一个<p>标签。

Custom Elements 如何使用 HTML 模板？

使用 Custom Elements 创建组件时，可以使用 HTML 模板作为组件的 HTML。

在创建 Custom Elements 时，您需要继承 HTMLElement 类或其子类，然后使用connectedCallback方法将 HTML 模板附加到组件中。

以下是一个简单的示例Custom Elements：

// javascriptcn.com 代码示例
<!-- HTML -->
<my-element></my-element>

<script>
  //JavaScript
  class MyCustomElement extends HTMLElement {
    constructor() {
      super();

      const template = document.querySelector('#my-template').content;
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.cloneNode(true));
    }
  }

  customElements.define('my-element', MyCustomElement);
</script>

在这个示例中，我们创建了一个名为“my-element”的组件，它将 HTML 模板添加到其 shadow root 中。

解释

querySelector获取<template>元素的内容作为模板。
然后使用attachShadow将模板附加到 Custom Elements 组件的 shadow DOM 中。
appendChild将模板克隆到 Custom Elements 的 shadow DOM 中。

HTML 模板中的替换

HTML模板中有时需要根据数据替换某些HTML元素的内容，例如在模板中添加一个文本输入框，然后动态更新其值。

以下是示例代码：

// javascriptcn.com 代码示例
<template id="my-input">
  <input type="text" id="input" placeholder="请填写" />
  <p id="output"></p>
</template>

<script>
  class MyCustomElement extends HTMLElement {
    constructor() {
      super();
      const template = document.querySelector('#my-input').content;
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.cloneNode(true));
      this.input = this.shadowRoot.querySelector('#input');
      this.output = this.shadowRoot.querySelector('#output');
      this.input.addEventListener('input', () => {
        this.output.innerHTML = this.input.value;
      });
    }
  }
  customElements.define('my-input', MyCustomElement);
</script>

在此示例中，我们在组件“my-input”中使用 HTML 模板。该模板包含一个文本输入框和一个空段落元素。然后，在 Custom Elements 创建时，我们通过创建一个对文本输入框的引用，在输入文本时更新段落元素。

总结

使用 HTML 模板是 Custom Elements 创建可重用、可维护和封装的组件的有用工具。通过使用 HTML 模板，可以减少DOM操作和代码量，并使组件更加简单明了。

在本文中，我们介绍了 HTML 模板的基本概念以及将其用于 Custom Elements 中的方法，并提供了一些示例代码作为参考。希望我们的文章对您有所帮助，并能够帮助您成功创建 Custom Elements 。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654df2127d4982a6eb74d2f6