#javascript #lit-element
#javascript #lit-элемент
Вопрос:
Изнутри метода для определения класса компонента Lit-элемента: как получить доступ к атрибуту дочернего компонента? Я пытаюсь получить / изменить значение дочернего атрибута. например
...
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);
}
Комментарии:
1. У меня была синтаксическая ошибка, которая заставила меня думать, что я не могу получить доступ к атрибутам. Глупый я.
Ответ №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);
Ответ №2:
если topics-unicode-tree-core
это также пользовательский элемент, то, надеюсь, у него также есть параметр установки / получения свойств (который используется по умолчанию для lit-элемента) для него, поэтому простой
let topicsTree = this.shadowRoot.getElementById("topics-tree");
topicsTree.querylimit = 5;
сделает свое дело
если нет, вы можете установить изменение атрибута напрямую.
topicsTree.setAttribute('querylimit', 5);