lit-html property assignment with custom classes

[keturn]

In an attempt to avoid referencing global variables in my ReactiveElement class definitions, I've been experimenting with passing in objects using lit-html property expressions, e.g.

html`<my-foo .bar=${someBar}>`

This works as expected in some cases, but as soon as someBar is an instance of a user-defined class, it breaks with

ReactiveElement.__observable: The type [object Object] of initialValue is not allowed in observables.

To hack around this, I've been passing ${{wrapped: someBar}}, as passing a plain object bypasses this complaint, but that's a pretty messy kludge. Is there some cleaner way to appease ReactiveElement here?

[kennyfrc]

There's currently a runtime check performed by the ReactiveElement class that validates if the property is a generic data type such as an object, boolean, string, etc. User-defined classes (and other objects like Date, DOM Node, etc) are currently rejected.

If you like the semantics of something like const someBar = new SomeBar(a: 1, b: 2), then maybe using a factory function that returns a plain object like const someBar = createSomeBar({a: 1, b: 2}) might suit what you want to do.

[keturn]

Why does it reject them?

Would it help if I could promise it may consider the object to be immutable? That is, I don't need the ReactiveElement receiving it to react to changes in this Bar object's properties. It'd be sufficient to react only to changes to object identity.

[kennyfrc]

I'd like to give a guarantee that all properties in the ReactiveElement are reactive. It's also my way of making invalid or unknown states unrepresentable, as I haven't tested thoroughly yet what weirdness will emerge with using classes.

[kennyfrc]

Here's a minimal example that might match what you're trying to do: prop passing example