自定义元素的属性可以camelCased吗？答案

【问题标题】：Can custom elements' attributes be camelCased?自定义元素的属性可以camelCased吗？
【发布时间】：2017-06-03 19:03:13
【问题描述】：

我有一个带有属性的自定义元素：

class MyElement extends HTMLElement {
    ...
    static get observedAttributes() {
        return ["camelCaseAttribute"];
    }

    set camelCaseAttribute(a) {
        this._a = a;
    }
    ...
 }

我在我的 HTML 中这样使用它：

<my-element camelCaseAttribute="blubb"></my-element>

camelCaseAttribute 属性在camelCase 中没有设置，但是不使用大写字母可以。为什么？

【问题讨论】：

你使用什么样的框架？这很重要
@maxkoryukov 他们正在使用 HTML 新技术，允许您扩展 HTMLElements 以创建自己的 html 元素
我正在使用香草自定义元素。除了一些用于不支持 web 组件的浏览器的 polyfill 之外，它都是普通的。填充物是这个github.com/webcomponents

标签： javascript html web-component custom-element

【解决方案1】：

在HTML Living Standard, Section 4.13.3 Core Concepts：

4.13.3 核心概念

任何与元素功能相关的无命名空间属性，由元素的作者确定，可以在autonomous custom element 上指定，只要属性名称为XML-compatible 并且不包含@987654324 @。例外是 is 属性，不能在 autonomous custom element 上指定（如果指定，则无效）。

在 HTML 生活标准中定义了自定义元素的无命名空间属性必须与 XML 兼容，并且没有 ASCII 大写字母，因此您的属性不能是驼峰式。

【讨论】：

【解决方案2】：

此链接可能会有所帮助：HTML spec says this about data attributes

自定义数据属性是指名称以字符串“data-”开头、连字符后至少有一个字符、与 XML 兼容且不包含大写 ASCII 字母的非命名空间中的属性。

【讨论】：

但这不是data-* 属性。