Custom Elements 中的表单（form）元素应用方法

在前端开发中，表单元素是不可或缺的一部分，但是原生的表单元素往往存在着一些限制，如样式不美观、交互不够灵活等。而 Custom Elements 是 Web Components 中的一部分，为我们提供了一种定制化的 HTML 元素的方式，可以更加自由地定义表单元素。本文将介绍在 Custom Elements 中，如何定义和应用表单（form）元素，以及一些实例代码供学习和使用。

Custom Elements 中定义表单元素

在 Custom Elements 中定义表单元素有如下步骤：

1. 使用 window.customElements.define() 定义自定义元素，其中 MyForm 是自定义元素的名称，HTMLElement 则是继承的基类。

class MyForm extends HTMLElement { 
  constructor() { 
    super(); 
  }
}
window.customElements.define('my-form', MyForm);

1. 在自定义元素中使用 Shadow DOM 定义表单元素的内部结构，设置其样式和交互等。下面是一个简单的文本框的实现，包含了输入提示和清除按钮。其中 :host 表示当前元素，::shadow 表示 Shadow DOM 的根节点。

// www.javascriptcn.com code example
class MyForm extends HTMLElement { 
  constructor() { 
    super(); 
    const shadow = this.attachShadow({mode: 'open'}); // 创建 Shadow DOM
    const wrapper = document.createElement('div'); 
    const input = document.createElement('input'); 
    const hint = document.createElement('div'); 
    const clear = document.createElement('button'); 
    
    input.type = 'text'; 
    hint.textContent = '请输入内容'; 
    clear.textContent = '清除'; 
    clear.style.display = 'none';
    
    input.addEventListener('input', () => { 
      clear.style.display = input.value ? 'block' : 'none';
    });
    
    clear.addEventListener('click', () => { 
      input.value = '';
      clear.style.display = 'none';
    });
    
    wrapper.appendChild(input); 
    wrapper.appendChild(hint); 
    wrapper.appendChild(clear); 
    
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: inline-block;
        width: 200px;
      }
      ::shadow input {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
        outline: none;
      }
      ::shadow div {
        margin-top: 5px;
        font-size: 12px;
        color: #888;
      }
      ::shadow button {
        display: inline-block;
        padding: 3px 6px;
        margin-left: 5px;
        font-size: 12px;
        color: #fff;
        background-color: #357ae8;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        outline: none;
        transition: background-color .2s;
      }
      ::shadow button:hover {
        background-color: #4c8fe4;
      }
    `;
    
    shadow.appendChild(wrapper);
    shadow.appendChild(style);
  }
}
window.customElements.define('my-form', MyForm);

这样，我们就定义了一个自定义的表单元素 my-form，内部包含了一个文本框和一个清除按钮。

Custom Elements 中应用表单元素

在应用自定义的表单元素时，只需要像使用普通 HTML 元素一样使用即可。如下代码中，我们将 my-form 元素作为 form 元素的子元素，显示一个用户名和密码输入框。在提交表单时，可以通过监听 submit 事件来获取表单数据执行相应的逻辑操作。

// www.javascriptcn.com code example
<form>
  <my-form>
    <label>用户名：</label>
  </my-form>
  <my-form>
    <label>密码：</label>
  </my-form>
  <button type="submit">登录</button>
</form>
<script>
  document.querySelector('form').addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(formData.get('用户名'), formData.get('密码'));
  });
</script>

效果如下所示：

以上就是在 Custom Elements 中定义和应用表单元素的方法，我们可以根据需求任意扩展表单元素的样式和交互。下面提供一份简单的表单元素模板，供大家参考和使用。

// www.javascriptcn.com code example
class MyForm extends HTMLElement { 
  constructor() { 
    super();
    const shadow = this.attachShadow({mode: 'open'}); 
    const wrapper = document.createElement('div');
    const label = document.createElement('label'); 
    const input = document.createElement('input'); 
    const error = document.createElement('div');
    
    input.type = this.type; 
    label.textContent = this.label; 
    error.textContent = this.error; 
    error.style.display = 'none';
    wrapper.appendChild(label); 
    wrapper.appendChild(input); 
    wrapper.appendChild(error); 
    
    const style = document.createElement('style');
    style.textContent = `
      :host {
        display: block;
        margin-bottom: 15px;
      }
      ::shadow label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      ::shadow input {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 3px;
        font-size: 14px;
        outline: none;
      }
      ::shadow div {
        margin-top: 5px;
        font-size: 12px;
        color: #f00;
      }
    `;
    
    shadow.appendChild(wrapper);
    shadow.appendChild(style);
  }
  
  get type() {
    return this.getAttribute('type') || 'text';
  }
  
  get label() {
    return this.getAttribute('label') || '';
  }
  
  get error() {
    return this.getAttribute('error') || '';
  }
}
window.customElements.define('my-input', MyForm);

使用示例：

// www.javascriptcn.com code example
<form>
  <my-input label="用户名：" error="请输入用户名" name="username" required></my-input>
  <my-input label="密码：" error="请输入密码" name="password" type="password" required></my-input>
  <button type="submit">登录</button>
</form>
<script>
  document.querySelector('form').addEventListener('submit', e => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(formData.get('username'), formData.get('password'));
  });
</script>

注：这里使用了一些不是本教程的技术，包括 Shadow DOM、模板字符串等，在实际开发中可以自行查阅相关教程。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cddc26e46428fe9e79ac23