You can initialize property values for a lit-element:
- From the element's constructor
- From markup in an HTML document that imports the element
- From a data binding inside another lit-element
- From a script that accesses the lit-element in DOM
Initialize a property from a lit-element constructor
To initialize a property from a lit-element constructor:
constructor(){
super();
this.myString='initial value';
this.myObject= { prop1: 'stuff', prop2: 'blah' }
}
**Always initialize object and array properties in the constructor if their subproperties or items are used in an HTML template.** It's fine to initialize objects to the empty object (`{}`), and arrays to the empty array (`[]`); but they must be initialized. For example, if `myObject.prop1` and `anotherObject.myArray[x]` are used in an element template, initialize them as follows:
wzxhzdk:1
Initialize a property from markup in an HTML document
To provide a value for an element's declared String
or Number
property when the element is used in an HTML document, include the value as a string:
<script type="module" src="/my-element.js"></script>
<my-element myString="stuff"></my-element>
<my-element myNumber="8"></my-element>
To provide a value for an element's declared Boolean
property when the element is used in an HTML document:
<script type="module" src="/my-element.js"></script>
<!-- Initialize myBool to true -->
<my-element myBool></my-element>
<!-- Initialize myBool to false -->
<my-element></my-element>
**Only `String`, `Number` and `Boolean` properties can be initialized by supplying strings in HTML.** For performance reasons, lit-element does not support supplying Object or Array property values via strings in HTML markup. See [] for alternatives.
Initialize a property from a data binding in another lit-element template
From inside another lit-element template, you can provide values to a lit-element with data bindings using JavaScript expressions:
import {LitElement, html} from '@polymer/lit-element';
import './my-element.js';
class SomeElement extends LitElement {
...
_render({prop1, prop2}){
return html`
<my-element myprop="${prop1}"></my-element>
`;
}
}
customElement.define('some-element', SomeElement);
**Supplying object and array property values with JavaScript expressions is...???**
wzxhzdk:5