0

One can pass down properties to another LitElement this way:

myRender(myParameter) {
  return html`
    <my-element-one .propertyOne=${myParameter.somePropertyOne}></my-element-one>
  `;
}

I have dozens of properties that I need to pass to multiple elements.

myRenderOne(myParameter) {
  return html`
    <my-element-one 
      .propertyOne=${myParameter.somePropertyOne}>
      .propertyTwo=${myParameter.somePropertyTwo}>
      ...
      .propertyHundred=${myParameter.somePropertyHundred}>
    </my-element-one>
  `;
}

myRenderTwo(myParameter) {
  return html`
    <my-element-two 
      .propertyFive=${myParameter.somePropertyFive}>
      .propertySix=${myParameter.somePropertySix}>
      ...
      .propertyFifty=${myParameter.somePropertyFifty}>
    </my-element-two>
  `;
}

How can I pass common properties without duplicating dozens of lines of code?

user7331530
  • 815
  • 1
  • 12
  • 21

2 Answers2

0

Pass them via Javascript.

Setting a custom property:

myElement.myProperty = myArrayOfProperties

Calling a custom method:

myElement.setProperties( myArrayOfProperties)
Supersharp
  • 29,002
  • 9
  • 92
  • 134
0

I would groups all those properties in a commonsProps object:

const commonsProps = {
  propertyOne: somePropertyOne,
  propertyTwo: somePropertyTwo,

  [...]

  propertyOneHundred: somePropertyOneHundred,
}

And use standard LitElement databinding:

<my-element-one .commonsProps=${commonsProps}></my-element-one>
<my-element-two .commonsProps=${commonsProps}></my-element-two>

Would that work for you?

LostInBrittany
  • 1,172
  • 9
  • 19