lit-element

问题 <div @click=${this.click_cb.bind(this, record)}>${record.msg}<div> Is this the correct way to pass an argument to a listener? 回答1: You should also be able to do this <div @click=${() => this.click_cb(record)}>${record.msg}<div> 来源： https://stackoverflow.com/questions/57585862/how-to-pass-arguments-to-listeners-in-lit-element

问题 I've got two Lit-element web components - one is units-list , which contains many units-list-item elements. The units-list-item elements have two different display modes: compact and detailed. Because the list element supports infinite scroll (and thus could contain several thousand units), we need any mechanism that toggles between the two modes to be as performant as possible. That's why I thought an ideal solution would be to use the :host-context() pseudo-selector in the styles for the

问题 I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong. static get properties(){ title: { type: String, attribute: 'title', }, titleEnable: { type: Boolean, attribute: 'title-enable', }, } constructor() { super(); this.titleEnable=true; this.title="default"; } render(){ return html` ${this.titleEnable ? html` <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>

问题 I have a custom component that should hide content when I set a boolean property to false. Every other property gets reflected except that one. I must be doing something wrong. static get properties(){ title: { type: String, attribute: 'title', }, titleEnable: { type: Boolean, attribute: 'title-enable', }, } constructor() { super(); this.titleEnable=true; this.title="default"; } render(){ return html` ${this.titleEnable ? html` <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>

问题 I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not succeed. May be the syntax I am using is wrong. I want to decrease the height of my text field. This is my text field <mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield> and my

问题 I am using polymer 3 and lit-element(2.2.1). The version of mwc-textfield is 0.13.0. I have read the documentations related to this version.In this documentation, I have found that we can add mixin for height. I had tried several ways but did not succeed. May be the syntax I am using is wrong. I want to decrease the height of my text field. This is my text field <mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield> and my

问题 Question is pretty much self-explanatory. Example: function generateTemplate(tag) { return html` <${tag} .some-prop=${1} > ... </${tag}> `; } 回答1: There isn't one way to do specifically what you mention here, but there are two approaches that can get you somewhat close: Conditional rendering const template = tag => { if (tag === 'custom-component') { return html`<custom-component></custom-component>`; } else if (tag === 'other-component') { return html`...`; } else { return html`<some-default

问题 Edit : Turns out, it helps if you import paper-listbox before using it in another element. For some reason I thought it was being imported as a dependency on another element I was importing, but no. As soon as I added the explicit import, it began working correctly. Original question follows. To start, this problem only happens when using paper-dropdown-menu (with paper-listbox inside) in a lit-element . We're using the component in almost the exact same way in multiple PolymerElement (s)

问题 I am currently learning how to user lit-element v2.0.0-rc.2 I have two components app.js and list-items.js. In app.js I am collecting data from local storage and storing it in this.todoList, Im then calling this.todoList in my list-items.js but the problem I am running into is that it is not passing the data as an array but as an object, I am trying to output that data in list-items all Im getting when I do a console.log of this.todoList is [object] in my tags it is rendering out with dots

问题 Following the question I would like to ask about the appropriate way to check the initial render status of a component (not the update status) in shadow DOM. Is there any similar to document.readyState or a promise ? I have also tried to do: getItems() { this.updateComplete .then(() => { this.nodesLists = this.shadowRoot.querySelectorAll(".name"); }) .then(...) } which also failed. Tia 回答1: await this.updateComplete (or this.updateComplete.then(...) ) is the correct way to wait until the