Web Components 实战：创建自定义比例条组件

比例条

前言

最近在项目中遇到了一个有趣的需求：创建一个具有**锯齿状边缘**的双色比例条。传统的CSS实现较为复杂，而使用Web Components技术可以优雅地解决这个问题。今天我将分享如何使用Web Components创建可复用的`<ratio-bar>`组件。

什么是Web Components？

Web Components是一套**浏览器原生支持**的组件化技术，由三个主要技术组成：

1. Custom Elements（自定义元素）**：允许定义自己的HTML标签

Shadow DOM（影子DOM）**：提供样式和标记的封装
HTML Templates（HTML模板）**：定义可复用的标记结构

这项技术于2014年提出，2016年成为W3C标准，现在所有现代浏览器都已支持。

需求分析

我们需要一个比例条组件，具有以下特性：

显示两种颜色的比例关系
两端有三角形锯齿效果
可通过属性动态配置
样式封装，避免污染全局样式
响应式，随属性变化自动更新

代码实现详解

1. 创建自定义元素类

javascript 复制代码

class RatioBar extends HTMLElement {
  // 声明要监听的属性
  static get observedAttributes() {
    return ['left', 'right', 'leftColor', 'rightColor'];
  }

  constructor() {
    super();
    // 创建Shadow DOM，实现样式封装
    this.attachShadow({ mode: 'open' });
  }
}

要点说明：

继承自`HTMLElement`基类

`observedAttributes`定义了需要监听的属性列表

Shadow DOM的`open`模式允许外部JavaScript访问

2. 生命周期回调方法

javascript 复制代码

connectedCallback() {
  // 元素被插入DOM时调用
  this.render();
}

attributeChangedCallback() {
  // 监听的属性变化时调用
  this.render();
}

生命周期钩子：

`connectedCallback`：组件挂载时触发

`attributeChangedCallback`：属性变化时触发

`disconnectedCallback`：组件移除时触发（本文未使用）

`adoptedCallback`：组件移动到新文档时触发（本文未使用）

3. 核心渲染逻辑

javascript 复制代码

render() {
  // 解析属性值
  const left = (Number(this.getAttribute('left')) - 1.5) || 0;
  const rightAttr = this.getAttribute('right');
  const right = rightAttr !== null ? (Number(rightAttr) - 1.5) : 100 - left;
  const leftColor = this.getAttribute('leftColor') || '#42E5FF';
  const rightColor = this.getAttribute('rightColor') || '#d48813';
  
  // 构建Shadow DOM内容
  this.shadowRoot.innerHTML = `
    <style>
      /* 组件样式 */
    </style>
    
    <!-- 组件结构 -->
  `;
}

属性处理逻辑：

`-1.5`的调整：为锯齿三角形留出空间

智能计算：如果只提供`left`，自动计算`right`为`100-left`

默认颜色：提供美观的默认配色

4. CSS技巧：创建锯齿效果

css 复制代码

.left::after {
  content: '';
  position: absolute;
  top: 0;
  left: ${left-0.1}%;  /* 精确定位 */
  width: 2.5%;
  height: 10px;
  background: inherit;
  /* 使用clip-path创建三角形 */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.right::before {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

关键CSS技术：

`clip-path`：现代CSS形状裁剪技术

`::after`/`::before`伪元素：不增加额外DOM节点

`background: inherit`：继承父元素背景色

百分比定位：确保锯齿随比例变化而移动

5. 注册自定义元素

javascript 复制代码

// 将自定义元素注册到浏览器
customElements.define('ratio-bar', RatioBar);

使用示例

基本使用

javascript 复制代码

<ratio-bar left="30" right="70"></ratio-bar>

自定义颜色

javascript 复制代码

<ratio-bar 
  left="25" 
  right="75" 
  leftColor="#1FCFE9" 
  rightColor="#FD894E">
</ratio-bar>

浏览器兼容性

Web Components得到了现代浏览器的良好支持：

Chrome/Edge: ✅ 完全支持（版本54+）
Firefox: ✅ 完全支持（版本63+）
Safari: ✅ 完全支持（版本10+）
移动端浏览器: ✅ 主流支持

对于不支持的老版本浏览器，可以使用 $polyfill$ (https://github.com/webcomponents/polyfills)。