CODEWITHSUNDEEP
javascripthtmlweb-componentcustom-element
treeno
treeno

Reputation: 2600

Can custom elements' attributes be camelCased?

I have a custom element with attributes:

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

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

I use it in my HTML like so:

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

The attribute camelCaseAttribute is not set when writing it in camelCase, but writing it without upper-case-letters works. Why?

Upvotes: 8

Views: 2159

Answers (2)

Andrew Li
Andrew Li

Reputation: 57934

In the 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).

It is defined in the HTML Living Standard that a custom element's namespace-less attributes must be XML-compatible with no ASCII uppercase letters, thus your attributes cannot be camelCased.

Upvotes: 11

Ali Hesari
Ali Hesari

Reputation: 1939

This link may help: 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.

Upvotes: 1

Related Questions