Replies: 3 comments
-
Getting element properties Assuming that element's name is Example: import {LitElement, html} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
@customElement('my-element')
export class myElement extends LitElement {
@property() one = 'value1';
@property() two = 'value2';
@state() three = 'value3';
render() {
return html`
<div>${this.getElementProperties()}</div>
`;
}
getElementProperties() {
let elementProperties = myElement.elementProperties;
let htmlTemplates = [];
elementProperties.forEach((value, key) => {
value.property = key;
Object.entries(value).forEach(([key, value]) => {
htmlTemplates.push(html`<div>${key}: ${value}</div>`);
});
htmlTemplates.push(html`<br>`);
});
return htmlTemplates;
}
} |
Beta Was this translation helpful? Give feedback.
-
That only retrieves declared reactive properties. Not other properties or accessors on the class that may participate in rendering or updates. Except in very special use-cases, I wouldn't try to treat declared properties as special. |
Beta Was this translation helpful? Give feedback.
-
Getting inherited properties and styles of parent element Assumed that parent's and child's element names are Example: parent.js import {LitElement, css, html} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
@customElement('parent-element')
export class ParentElement extends LitElement {
static styles = css`
.parent1 {
background-color: yellow;
}
.parent2 {
background-color: gray;
}
.parent3 {
background-color: green;
`;
@property() greeting0 = 'Hello from "Parent element"';
@property() data0 = 5;
@property() items0 = [1, 2, 3];
} child.js import {LitElement, css, html} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import {ParentElement} from './parent.js';
@customElement('child-element')
export class ChildElement extends ParentElement {
static styles = [
ParentElement.styles,
css`
.child1 {
background-color: red;
}
.child2 {
background-color: blue;
}
.child3 {
background-color: pink;
}
`
];
@property() greeting1 = 'Hello from "Child Element"';
@property() data1 = true;
@property() items1 = { x: [1, 2, 3]};
render() {
return html`
<div class="parent1">${this.greeting0}</div>
<div class="parent2">${this.data0}</div>
<div class="parent3">${this.items0}</div>
<div class="child1">${this.greeting1}</div>
<div class="child2">${this.data1}</div>
<div class="child3">${this.items1}</div>
`;
}
} |
Beta Was this translation helpful? Give feedback.
-
Please have a look at the following old links and let me know if an improvement has been made, as regards retrieving all current and any inherited properties, in new lit. A full example is more than welcome. Tia
Beta Was this translation helpful? Give feedback.
All reactions