使用 Custom Elements 的辩证法-JavaScript中文网-JavaScript教程资源分享门户

介绍

Custom Elements 是 Web Components 标准中的一部分，可以帮助开发者创建可复用的自定义 HTML 元素，扩展浏览器原生的 HTML 元素，以及定义自己的交互元素。

Custom Elements 可以提供很好的抽象和封装，可以让我们以更简洁，更易于维护的方式来创建和管理 HTML 元素。然而，在使用 Custom Elements 时，我们也需要注意一些辩证关系。

辩证法

自定义元素通用性 vs. 可定制性

Custom Elements 可以被用来创建通用的 UI 元素，例如类似于标签等。这些通用的 UI 元素应该是可定制的，以反映不同的设计和品牌。

然而，在定义这些 UI 元素时，我们需要权衡其通用性和定制性。通用的元素应该是灵活的，而定制的元素应该是专注于解决单个特定的问题。

继承现有元素 vs. 完全自定义

Custom Elements 可以扩展现有的 HTML 元素，也可以完全自定义元素。在定义 Custom Elements 时，我们需要权衡我们是否要继承现有元素或者完全自定义元素。

继承现有元素可以使我们的自定义元素更易于使用和理解。然而，我们需要确保我们的自定义元素扩展现有元素的行为是具有意义的。

完全自定义元素可以帮助我们创建复杂的 UI 控件，但是如果我们的元素过于复杂，则可能会使用户感到困惑和压力。

组件的优雅降级 vs. 非 Web Components 环境的支持

Custom Elements 可以作为一个优雅降级的方案，在不支持 HTML Template 和 Shadow DOM 的浏览器中（如 IE11），通过 Polyfill 来支持 Web Components，从而进行跨浏览器的兼容性。

然而，我们也需要考虑到是否需要支持非 Web Components 环境（如旧版浏览器或者爬虫等）。如果需要，我们需要提供一个备选方案或者一个适用于所有环境的解决方案。

学习和指导意义

使用 Custom Elements 的辩证法需要我们在设计和实现自定义元素时，更加注重灵活性和适应性。我们需要为不同的场景和需求提供相应的元素和解决方案，而不是一刀切。

通过这种辩证法，我们可以更好地把握 Custom Elements 的核心思想，并且能够更加灵活地应对不同的需求，从而提高我们自定义元素的可用性和可维护性。

示例代码：

// www.javascriptcn.com code example
<template id="alert-template">
  <style>
    .alert {
      padding: 1rem;
      background: #fff;
      border: 1px solid #000;
    }

    .alert-primary {
      color: #fff;
      background: #007bff;
    }

    .alert-secondary {
      color: #fff;
      background: #6c757d;
    }

    .alert-success {
      color: #fff;
      background: #28a745;
    }

    .alert-danger {
      color: #fff;
      background: #dc3545;
    }

    .alert-warning {
      color: #212529;
      background: #ffc108;
    }

    .alert-info {
      color: #fff;
      background: #17a2b8;
    }

    .alert-uppercase {
      text-transform: uppercase;
    }
  </style>

  <div class="alert">
    <slot></slot>
  </div>
</template>

<script>
  class AlertElement extends HTMLElement {
    static get observedAttributes() {
      return ['type'];
    }

    constructor() {
      super();

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

    connectedCallback() {
      this._updateType();
    }

    attributeChangedCallback(name, oldValue, newValue) {
      this._updateType();
    }

    _updateType() {
      const alert = this._shadowRoot.querySelector('.alert');

      if (this.getAttribute('type') === 'primary') {
        alert.classList.add('alert-primary');
      } else if (this.getAttribute('type') === 'secondary') {
        alert.classList.add('alert-secondary');
      } else if (this.getAttribute('type') === 'success') {
        alert.classList.add('alert-success');
      } else if (this.getAttribute('type') === 'danger') {
        alert.classList.add('alert-danger');
      } else if (this.getAttribute('type') === 'warning') {
        alert.classList.add('alert-warning');
      } else if (this.getAttribute('type') === 'info') {
        alert.classList.add('alert-info');
      }

      if (this.hasAttribute('uppercase')) {
        alert.classList.add('alert-uppercase');
      }
    }
  }

  customElements.define('x-alert', AlertElement);
</script>

<x-alert type="primary" uppercase>Hello World!</x-alert>
<x-alert type="danger">Error!</x-alert>

以上示例代码演示了一个具有类型和大小写转换等自定义属性的元素 Alert。这个元素是非常通用的，并且易于扩展和改变，让开发者可以轻松地定义自己的通用 UI 元素。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7da8ea941bf7134e0d111

使用 Custom Elements 的辩证法

介绍

辩证法

学习和指导意义

接着读