Angular 2如何处理驼峰式属性？自研Web Components绑定库遇阻求助

首先得明确：浏览器把HTML属性名规范化为小写是HTML标准规定的行为，咱们没法直接改变这个规则，所以得从适配标准或者预处理模板这两个方向找解决方案。结合你想要的Angular风格语法，给你几个实用的方案：

方案1：遵循Web Components标准——短横线转驼峰属性规范化 #

这是最贴合原生规范的方案，也是Angular、Vue等框架处理属性绑定的通用思路。核心逻辑是：

• 让用户在HTML中用短横线命名的属性（比如mock-data-prop）对应你代码里的驼峰属性名（mockDataProp）
• 通过自定义元素的observedAttributes监听属性变化，再把短横线名转成驼峰名来处理

具体实现代码： #

// 工具函数：短横线命名转驼峰
function kebabToCamel(str) {
  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
}

// 自定义元素示例
class DataBoundComponent extends HTMLElement {
  // 声明需要监听的短横线属性
  static get observedAttributes() {
    return ['mock-data-prop', 'custom-input'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    // 转成驼峰属性名
    const camelAttr = kebabToCamel(attrName);
    // 执行你的数据绑定逻辑
    this.bindData(camelAttr, newVal);
  }

  bindData(propName, sourceVal) {
    // 这里写你的数据绑定逻辑，比如把sourceVal映射到propName对应的属性
    console.log(`绑定属性：${propName} -> 数据源：${sourceVal}`);
  }
}

customElements.define('data-bound', DataBoundComponent);

使用方式： #

<data-bound mock-data-prop="mockDataProp" custom-input="customInput"></data-bound>

这个方案的好处是完全符合Web Components标准，兼容性拉满，不需要额外的模板编译步骤，唯一的小缺点是用户写的属性名是短横线风格，和你期望的括号语法有差异，但胜在稳定可靠。

方案2：模板预处理——实现你想要的(mockDataProp)="customInput"语法 #

如果你坚持要Angular风格的括号语法，可以在模板渲染到DOM之前做字符串预处理，把自定义语法转换成合法的HTML属性，避免浏览器解析时小写化属性名。

具体实现代码： #

// 模板编译函数：把Angular风格的括号语法转成合法的data属性
function compileTemplate(rawTemplate) {
  // 匹配 (驼峰属性名)="绑定值" 的语法
  return rawTemplate.replace(/\(([A-Za-z0-9]+)\)="([^"]+)"/g, (_, propName, sourceVal) => {
    // 把驼峰转成短横线命名的data属性，比如mockDataProp -> data-bind-mock-data-prop
    const kebabProp = propName.replace(/([A-Z])/g, '-$1').toLowerCase();
    return `data-bind-${kebabProp}="${sourceVal}"`;
  });
}

// 使用示例
const userTemplate = `<data-bound (mockDataProp)="customInput" (userName)="currentUser.name"></data-bound>`;
const compiledTemplate = compileTemplate(userTemplate);
// 编译后结果：<data-bound data-bind-mock-data-prop="customInput" data-bind-user-name="currentUser.name"></data-bound>

// 把编译后的模板插入DOM
document.body.innerHTML = compiledTemplate;

然后在自定义元素里读取dataset来处理绑定：

class DataBoundComponent extends HTMLElement {
  connectedCallback() {
    // 遍历所有data-bind-*属性
    Object.entries(this.dataset).forEach(([key, sourceVal]) => {
      if (key.startsWith('bind')) {
        // 去掉bind前缀并转回驼峰属性名，比如bindMockDataProp -> mockDataProp
        const propName = key.replace(/^bind/, '')
                            .replace(/^[A-Z]/, char => char.toLowerCase());
        this.bindData(propName, sourceVal);
      }
    });
  }

  bindData(propName, sourceVal) {
    // 执行你的数据绑定逻辑
    console.log(`绑定属性：${propName} -> 数据源：${sourceVal}`);
  }
}

这个方案完美满足你想要的语法风格，而且预处理是在字符串层面完成的，比直接操作innerHTML用正则更可靠——毕竟DOM解析后结构可能会变化，正则很容易出问题。

方案3：利用原生dataset简化处理（备选） #

如果你不想写复杂的模板编译，也可以直接用data-*属性，原生dataset会自动把短横线转成驼峰：

<data-bound data-mock-data-prop="customInput"></data-bound>

在元素里直接读取：

this.dataset.mockDataProp; // 直接得到"customInput"

这个方案最简单，但语法上和你期望的括号风格差距较大，适合快速原型开发。

对你现有方案的点评 #

• 你提到的AngularJS风格属性规范化（短横线转驼峰）其实是非常成熟的方案，完全可以采用，这也是业界通用的最佳实践之一。
• 直接操作innerHTML用正则处理确实不太妥当，因为DOM解析会自动修正HTML结构，正则很容易匹配出错，模板预处理的方式会更可控。

内容的提问来源于stack exchange，提问作者Adrian Moisa