lit-html

问题 I am newbie to lit-element, and when use import to include the library, I am getting error as: Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../". Please provide any alternatives/solutions. import { LitElement, html } from 'lit-element'; class MyElement extends LitElement { render(){ return html` <div> <p>A paragraph</p> </div> `; } } customElements.define('my-element', MyElement); 回答1: This doesn't work because

问题 I am newbie to lit-element, and when use import to include the library, I am getting error as: Uncaught TypeError: Failed to resolve module specifier "lit-element". Relative references must start with either "/", "./", or "../". Please provide any alternatives/solutions. import { LitElement, html } from 'lit-element'; class MyElement extends LitElement { render(){ return html` <div> <p>A paragraph</p> </div> `; } } customElements.define('my-element', MyElement); 回答1: This doesn't work because

问题 I started a project based on LitElement There are many components nested in each other, Let us say we have this structure: the root component is my-app import { LitElement, html, customElement, query } from 'lit-element'; import './my-form'; import './my-view'; import { MyView } from './my-view'; @customElement('my-app') export class MyApp extends LitElement { @query('my-view') private myView?: MyView; private handleCountChange(e: CustomEvent<{ count: number }>) { if (!this.myView) throw 'my

来源： https://stackoverflow.com/questions/55962214/litelement-not-updating-checkbox-in-list

问题 <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 use typescript to write a simple demo with lit-html: import {html, TemplateResult} from 'lit-html'; export default function sayHello(name: string): TemplateResult { return html`<h1>Hello ${name}</h1>`; } and use jest to write some simple test: import sayHello from "./sayHello"; import {render} from "lit-html"; beforeEach(() => { render('', document.body); }) describe('sayHello', () => { it('says hello', () => { render(sayHello('world'), document.body); const component = document

问题 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

问题 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