v0.13.1

What's Changed

• document the new static observedAttributeHandlers by @trusktr in #28
• improve the static LumeElement.defineElement() method by @trusktr in #29
• improve attribute handling by @trusktr in #30
• rename root to templateRoot, update docs by @trusktr in #31

Details

feat:

Update classy-solid, which now requires placing getter/setter attribute decorators to be placed on both the getter and setter.

BREAKING: If you previously use an attribute decorator on a getter/setter, you need to ensure that you write the decorator on both the getter and the setter:

// BAD:
@element('my-el')
class MyEl extends Element {
    #foo = 123

    @numberAttribute
    get foo() {return this.#foo}
    set foo(n) {this.#foo = n}
}

// GOOD:
@element('my-el')
class MyEl extends Element {
    #foo = 123

    @numberAttribute
    get foo() {return this.#foo}
    @numberAttribute
    set foo(n) {this.#foo = n}
}

If you're using @noSignal, make sure to duplicate that on any getter/setter too:

@element('my-el')
class MyEl extends Element {
    #foo = 123

    @numberAttribute
    @noSignal
    get foo() {return this.#foo}
    @numberAttribute
    @noSignal
    set foo(n) {this.#foo = n}
}

feat:

Increase interoperability by enforcing that JS values null and string values coming from attributes are treated the same as the values being set on to the respective JS properties. Basically, any null or string value assigned to an attribute JS property will be handled the same way as if removing the espective attribute or setting the respective attribute's value.

BREAKING: If you previously relied on setting an attribute-decorated JS property to a null value or string value without the string being coerced, you'll need to find another approach. All null values and string values assigned to attribute JS properties are now coerced just the same as string values from the attributes are. This means that this

el.someBoolean = 'false'

now behaves the same as this

el.setAttribute('some-boolean', 'false')

when the someBoolean property was decorated with @booleanAttribute decorator. Previously, the JS property value would have been the string literal "false" but now it will be false.

This improves support for frameworks like Preact which pass string values as-is from JSX props to custom element JS properties. Before this change, unexpected string values would break Lume, but now string values are properly coerced no matter how they arrive to the JS property (it'll work better anywhere, f.e. Vue, Svelte, Angular, etc).

feat:

A new .shadowOptions instance property allows defining the options for an element's ShadowRoot. For example:

@element('my-el')
class MyEl extends Element {
    shadowOptions = { mode: 'closed' }
}

deprecation:

root has been renamed to templateRoot to make it more obvious what it is for. The old root property will be deleted in an upcoming release.

Full Changelog: v0.12.3...v0.13.1