Custom Elements 的应用与踩坑记-JavaScript中文网-JavaScript教程资源分享门户

Custom Elements 是 web components 技术的重要组成部分，能够让我们创建自定义标签并在浏览器中使用。在前端开发中，我们可以利用 Custom Elements 提高代码复用性、提升代码组织性，但是在实际使用中，也存在一些需要注意的细节和踩坑。

本文将介绍 Custom Elements 的应用与踩坑经验，并展示相关示例代码。

Custom Elements 的应用

1. 创建自定义组件

通过 Custom Elements，我们可以快速的创建自定义组件，这样我们就能更加灵活的构建页面，减少代码冗余，推动组件化开发。

<!-- 创建一个名为 my-element 的自定义组件 -->
<my-element></my-element>

// 定义一个 MyElement 类，该类继承自 HTMLElement
class MyElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.textContent = '自定义组件';
  }
}

// 注册自定义组件
customElements.define('my-element', MyElement);

上面代码中，我们定义了一个名为 MyElement 的类，这个类继承自 HTMLElement，可以看作是自定义组件的原型，因为它在自定义组件处于生命周期内会被实例化。然后，我们使用 customElements.define('my-element', MyElement) 来定义一个名为 my-element 的自定义组件，该组件在页面中使用时就会自动调用 MyElement 类的实例化方法。

在自定义组件中，我们可以根据需要设置元素的属性、事件和样式等，灵活应用于实际需求之中。

2. 封装现有元素

除了创建自定义组件外，我们还可以通过封装现有元素来扩展其功能。例如，我们可以为 input 元素添加一个自定义的验证规则。

<!-- 封装 input 元素 -->
<my-input></my-input>

class MyInput extends HTMLInputElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.addEventListener('input', this.handleInput);
  }

  handleInput(event) {
    const value = event.target.value;
    if (!/^[\d]{6}$/.test(value)) {
      event.preventDefault();
      this.setCustomValidity('请输入6位数字');
    } else {
      this.setCustomValidity('');
    }
  }
}

customElements.define('my-input', MyInput, { extends: 'input' });

上面代码中，我们定义了一个名为 MyInput 的类，该类继承自 HTMLInputElement，这意味着我们可以用它来代替 input 元素。然后，我们在 MyInput 类中重写了 input 的事件，并添加了自己的验证规则。最后，我们使用 customElements.define('my-input', MyInput, { extends: 'input' }) 来注册一个扩展了 input 元素的组件。在使用时，只需使用 <my-input> 标签代替 input 元素即可。

Custom Elements 的踩坑记录

1. Shadow DOM 下的样式问题

在使用 Shadow DOM 时，我们经常会遇到样式失效的问题。这是因为 Shadow DOM 会将其内部的样式隔离到一个独立的作用域中，如果要在外部修改 Shadow DOM 的样式，我们需要使用 ::part() 或者 ::theme() 进行样式穿透。

<!-- 使用 ::part() 穿透 Shadow DOM 样式 -->
<my-element>
  <p part="content">这是内容</p>
</my-element>

<style>
  my-element::part(content) {
    color: red;
  }
</style>

上面代码中，我们为 my-element 的子元素添加了 part="content" 属性，表示该元素属于 content 部分。然后，我们在样式中使用 my-element::part(content) 选择器来修改该元素的样式，这样就可穿透到 Shadow DOM 中的样式，并让其在同个样式作用域下生效。

2. 自定义组件暴露 API 的问题

在开发自定义组件时，我们需要暴露一些 API，以便让组件的使用者在外部进行控制。但是，直接将方法或属性添加到组件中，会让我们的组件变得复杂且难以维护，为了解决这个问题，我们可以将 API 抽离成 mixins 或者 option 的形式。

const MyMixin = (SuperClass) => {
  return class extends SuperClass {
    show() {
      console.log('show');
    }

    hide() {
      console.log('hide');
    }
  }
};

class MyElement extends MyMixin(HTMLElement) {
  constructor() {
    super();
  }

  connectedCallback() {
    this.show();
  }
}

customElements.define('my-element', MyElement);

上面代码中，我们将 API 暴露成了 MyMixin，它是一个函数，接受一个 SuperClass 父类，返回一个继承自 SuperClass 父类的子类，在 MyMixin 子类中，我们定义了 show 和 hide 两个方法。然后，在 MyElement 类中，我们继承了 MyMixin 并可以直接调用暴露出来的 show 方法。这样做可以让我们的组件更加的简单清晰，并便于其他项目中复用。

总结

Custom Elements 是一项非常重要的 web components 技术，可以帮助我们创建自定义组件、封装现有元素，并提高代码组织性。在实际应用中，为了避免一些常见问题和踩坑，我们需要注意 Shadow DOM 下的样式穿透问题和自定义组件的 API 暴露问题。

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

Custom Elements 的应用与踩坑记