Передача нескольких повторяющихся свойств в несколько LitElement

Question

Можно передать свойства другому LitElement таким образом:

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

У меня есть десятки свойств, которые мне нужно передать нескольким элементам.

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>
  `;
}

Как передать общие свойства, не дублируя десятки строк кода?

Answer 1

Я бы сгруппировал все эти свойства в объекте commonsProps:

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

  [...]

  propertyOneHundred: somePropertyOneHundred,
}

И использовал бы стандартную привязку данных LitElement:

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

Будет ли это работать для вас?

Answer 2

Передайте их через Javascript.

Установка пользовательского свойства:

myElement.myProperty = myArrayOfProperties

Вызов пользовательского метода:

myElement.setProperties( myArrayOfProperties)