-
Notifications
You must be signed in to change notification settings - Fork 320
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Iterating properties and their options #1102
Comments
Currently we have In the meantime, you can make a LitElement subclass that overrides
Hope that helps. |
That's great news!
I have tried as follows: NewElement.js import { LitElement } from 'lit-element';
export class NewElement extends LitElement {
// Note, the Map is pre-populated with the superclass map
static elementProperties = new Map(Object.getPrototypeOf(this).elementProperties ?? []);
static createProperty(name, options) {
this.elementProperties.push(name, options);
super.createProperty(name, options);
}
} But it gives
Next, something like the following is ok? example.js import { NewElement } from './NewElement';
import { customElement, property, html } from 'lit-element';
@customElement('my-example')
export class MyExample extends NewElement {
@property({
attribute: true,
noAccessor: false,
reflect: false,
type: String
}) aProperty;
constructor() {
super();
}
render() {
return html`
<div>${this.elementProperties}</div>
`;
}
} Tia! |
This is how it works for me: NewElement.js import { LitElement } from 'lit-element';
export class NewElement extends LitElement {
self = this;
// Note, the Map is pre-populated with the superclass map
static elementProperties = new Map(Object.getPrototypeOf(self).elementProperties ?? []); // `self` instead of `this`
static createProperty(name, options) {
this.elementProperties.set(name, options); // `set` instead of `push`
super.createProperty(name, options);
}
static get properties() {
return {
greeting0: {type: String},
data0: {attribute: false},
items0: {type: Array},
};
}
} example.js import { NewElement } from './NewElement';
import { customElement, html } from 'lit-element';
@customElement('my-example')
export class MyExample extends NewElement {
static get properties() {
return {
greeting1: {type: String},
data1: {attribute: false},
items1: {type: Array},
};
}
constructor() {
super();
}
render() {
return html`
<div>${this.constructor.elementProperties}</div>
`;
}
} Finally getting the following proof of working:
Note: For using |
The example above wasn't quite correct. Here's a working example: https://stackblitz.com/edit/lit-element-typescript-demo?file=my-element.ts. Hope that helps. |
Description
Who wants the functionality
I do, GPT GHNewbiee.
What it is they want
I want to iterate the name (as a string) and the (attribute, type - at least) options of each property of a class to calculate other values
Why they want it
It makes my life easier!
Functional description of task/subtask
Example
Acceptance criteria
I think a method like
listProperties()
which returns an array of objects in the same order that the properties are declared, like:would be fine. Tia
The text was updated successfully, but these errors were encountered: