自定义元素的属性可以驼峰式吗？

Question

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

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

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

我在 HTML 中这样使用它：

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

属性camelCaseAttribute在用驼峰式书写时没有设置，但不用大写字母书写也可以。为什么？

Answer 1

这个link可能有帮助：HTML spec says this about data attributes

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

Answer 2

在HTML Living Standard, Section 4.13.3 Core Concepts:

4.13.3 Core concepts

Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).

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

自定义元素的属性可以驼峰式吗？

Can custom elements' attributes be camelCased?

html

javascript

web-component

custom-element

4.13.3 Core concepts