Как получить доступ и, возможно, изменить атрибут дочернего компонента с подсветкой?

Question

Изнутри метод для Lit-element Определение класса компонента: как получить доступ к атрибуту дочернего компонента?Я пытаюсь получить / изменить значение атрибута ребенка.например,

...
render() {
  return html`
    <div>
      <label for="queryLimit">Query Limit</label>
      <input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
      <button @click="${this.changeQueryLimit}">change attributes</button>
    </div>
    <topics-unicode-tree-core querylimit="9" id="topics-tree"></topics-tree>
  `;
}
...
changeQueryLimit() {
  let topicsTree = this.shadowRoot.getElementById("topics-tree");
  // TODO: console.log(topicsTree.querylimit);
}

Answer 1

Вот пример того, как получить доступ и, возможно, изменить атрибут дочернего компонента с подсветкой:

Демо

import { LitElement, html } from '@polymer/lit-element'; 

class MenuElement extends LitElement {
    static get properties(){ return {
       qlimit:{type:String}
     }
    }

    constructor() {
    super();
      this.qlimit="9";
    }

  render() {
      return html`
        <div id="div">
          <label for="queryLimit">Query Limit</label>
          <input type="number" name="queryLimit" id="queryLimit" value="7" min="1" max="21">
          <button @click="${this.changeQueryLimit}">change attributes</button>
        </div>
        <topics-unicode-tree-core .querylimit="${this.qlimit}" id="topics-tree"></topics-unicode-tree-core>
      `;
    }

    changeQueryLimit() {
      //let topicsTree = this.$.topicsTree;

         console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit );

         this.qlimit="10" 
         setTimeout(()=>{
              console.log('-->', this.shadowRoot.querySelector("#topics-tree").querylimit )},200)

    }
}
customElements.define('menu-element', MenuElement);

Answer 2

, если topics-unicode-tree-core также является пользовательским элементом, то, надеюсь, у него также есть свойство setter / getter (которое по умолчанию для lit-element) для него, так что простой

let topicsTree = this.shadowRoot.getElementById("topics-tree");
topicsTree.querylimit = 5;

сделает свое дело

Если нет, вы можете установить модифицировать атрибут напрямую.

topicsTree.setAttribute('querylimit', 5);