WebReflection / hyperHTML-Element

An extensible class to define hyperHTML based Custom Elements.
ISC License
202 stars 25 forks source link

Do not override the getter of a boolean attribute that is written in … #74

Closed null0rUndefined closed 3 years ago

null0rUndefined commented 3 years ago

When we have a parent class with only boolean attributes defined, the define method will concat boolean and observed attributes. This means that when we extend the parent class without overriding any boolean or observed attributes, the new class will contain equal values ​​in the boolean and observed attribute arrays.

When the define method is called for a new class, it defines boolean attribute getters and then replaces it with normal observed attribute getters due to incorrect check of existing attribute getters in kebab-case.

class Parent extends HyperHTMLElement {
    static get booleanAttributes() {
        return ['kebab-case'];
    }
}

Parent.define('parent-class');
console.log(Parent.booleanAttributes) // ['kebab-case']
console.log(Parent.observedAttributes) // ['kebab-case']

class Child extends Parent {};
Child.define('child-class');

const child = document.createElement('child-class');
child.kebabCase = 'any value';
console.log(child.kebabCase) // 'any value' instead of true

The problem is that the define method checks the attribute in the prototype using its name in the kebab case, but defines a getter in the camel case. This leads to the problem that a defined getter for a boolean attribute can be overridden by a normal getter for an observed attribute.

Closes #75